Getting Started

요구되는 시스템 사항

Node.js 14.6.0 or newer
MacOS, Windows (including WSL), and Linux are supported

 

Automatic Setup

타입스크립트를 사용하지 않을때

npx create-next-app@latest
# or
yarn create next-app
# or
pnpm create next-app

 

타입스크립트를 사용할때

npx create-next-app@latest --typescript
# or
yarn create next-app --typescript
# or
pnpm create next-app --typescript

 

메뉴얼 셋업

npm install next react react-dom
# or
yarn add next react react-dom
# or
pnpm add next react react-dom

셋업이 끝난 뒤..

Run npm run dev or yarn dev or pnpm dev to start the development server on http://localhost:3000

---

package.json의 의미

"scripts": {
  "dev": "next dev",
  "build": "next build",
  "start": "next start",
  "lint": "next lint"
}

이러한 스크립트들은 각각 어플리케이션을 개발하는 다른 환경을 의미한다.

• dev - next dev는 개발모드로 진입할 수 있다.
• build - next build는 production모드로 진입할 수 있다. 
• start - next start는 next build를 통해  production모드로 진입한 후 실행하게되면 배포되었을때의 상황을 미리 체험할 수 있다.
• lint - 내장된 ESLint구성을 셋업해준다.

 

pages, public폴더의 의의

• pages폴더: 파일이름을 기준으로 경로가 설정된다.
  예를들어 pages폴더내에 about.js란 파일은 이름을 기반으로 /about주소로 매핑된다.
• public폴더: 이미지, 폰트와 같은 정적인 파일들을 저장하는 곳이다. public폴더내에 있는 파일들은 상대경로를 통해 mport될 수 있다. 예를 들어 public폴더내에 imges폴더안 profile.jpg는 다음과 같이 import될 수 있다. <Image src="images/profil.jpg" />

 

Next.js는 페이지기반으로 구성된다.

페이지란 pages폴더안에 있는 js, jsx, ts, tsx등으로 exporte되는 React Component 각각을 의미한다.

페이지들은 파일이름과 함께 Next에서 제공해주는 dynamic route parameters를 추가해줄 수 있기도 하다.

 

 

내가보는 Next.js의 장점

페이지단위로 SSR, SSG, ISR, CSR을 독립적으로 사용하는 것이 아니라, 컴포넌트별로 렌더링타입을 지정해줄 수 있어서 좋은 것 같다.

즉, 한 페이지내에서도 다양한 컴포넌트가 사용되므로 어떠한 컴포넌트는 빈번한 업데이트가 필요없으므로 ISR을, 어떠한 컴포넌트는 빈번한 업데이트가 필요하므로 SSR 혹은 CSR을 사용하여 개발자의 입맛대로 효율성을 극도로 끌어낼 수 있다는 점 같다.