[Next.js] Next.js 설치

참고)

https://nextjs-ko.org/docs/getting-started/installation

Installation – Nextjs 한글 문서

https://nextjs.org/docs/app/getting-started/installation

Getting Started: Installation | Next.js

---

※ 시스템 요구 사항

• Node.js 18.18 이상
• macOS, Windows (WSL 포함), Linux 지원

---

1. 자동 설치

• create-next-app 을 사용하여 새로운 Next.js 앱을 시작
• 모든 설정을 자동으로 설정

// Terminal
> npx create-next-app@latest

• 설치 시 다음과 같은 프롬프트가 표시

What is your project named? my-app
Would you like to use TypeScript? No / Yes
Would you like to use ESLint? No / Yes
Would you like to use Tailwind CSS? No / Yes
Would you like your code inside a `src/` directory? No / Yes
Would you like to use App Router? (recommended) No / Yes
Would you like to use Turbopack for `next dev`?  No / Yes
Would you like to customize the import alias (`@/*` by default)? No / Yes
What import alias would you like configured? @/*

• 프롬프트 이후, create-next-app 은 프로젝트 이름으로 폴더를 만들고 필요한 종속성을 설치

---

2. 수동 설치

① package.json 생성 후 "license": "ISC" → "MIT"로 변경

// Terminal
> npm install init -y

 

// package.json

{
  ...
  "license": "MIT",
  ...
}

 

② 패키지 설치

// Terminal
> npm install next@latest react@latest react-dom@latest

2. react/latest, next/latest, react-dom/latest 최신버전으로 설치

> npm install react@latest next@latest react-dom@latest

 

※ react-dom 이 필요한 이유

: react는 UI와 다른 모든 것을 구성하는 부분, React-dom은 그것을 브라우저의 Document Object Model(DOM)에 렌더하는 역할.

 

3. package.json에서 scripts 수정

"scripts": {

  "dev": "next dev"

}

 

5. app 폴더 생성

(app > application X)

(page > Page X)

 

6. page.tsx 또는 page.jsx 생성

 

7.

// 기본적인 컴포넌트를 export

export default function 이름() {
  return <h1>Hello NextJs!</h1>
}

 

8. > npm run dev

메세지가 뜨게 되는데 TypeScript를 사용하려고 하지만 설치되어 있지 않으니 대신 설치하겠다 라는 내용

※ Your page app/page.tsx did not have a root layout. We created app\layout.tsx for you.

 

※ > npm run dev를 호출하면, 자동으로 NextJS는 프레임워크로써 app폴더를 참조 → 무조건 app 폴더(application(x))

또한 page라는 파일을 찾으려함 → home이나 index같은 파일명(x)

∴ Next.js는 app 폴더 안의 page 라는 파일을 참조

그 뒤엔 그 안에 있는 컴포넌트를 확인 → 컴포넌트의 이름은 크게 상관이 없음

 

9. layout.tsx 파일

① metadata 라고 export 되어 있는 객체

② RootLayout 이라는 객체

 

→ page, client component, navigation 을 배우다 보면 자연스럽게 layout이 왜 필요한지 이해할 수 있음