Next 설치하기

Next를 사용하기 위해서는 다음의 환경들을 설치해야 합니다.

• Node.js 버전 10.13 이상
• MacOS, Windows 및 Linux 운영체제
• npm 혹은 yarn

1. CNA를 사용하여 Next 설치하기

Next는 create-react-app처럼 예제가 포함된 간단한 넥스트 애플리케이션을 만들어주는 CNA를 제공합니다. 프로젝트 디렉토리에서 터미널에 다음과 같이 입력하여 Next 개발환경을 세팅할 수 있습니다.

$ npx create-next-app

Next환경의 프로젝트가 생성되면 package.json 파일에서 기본 설정된 세팅을 확인할 수 있습니다.

{
  "name": "learn-starter",
  "version": "0.1.0",
  "private": true,
  "scripts": {
    "dev": "next dev",
    "build": "next build",
    "start": "next start"
  },
  "dependencies": {
    "next": "^11.0.0",
    "react": "17.0.2",
    "react-dom": "17.0.2"
  }
}

• next dev : 개발 환경의 Next를 실행합니다. 개발 환경은 핫 코드 리로딩을 지원합니다.
• next build : Next 애플리케이션 번들을 만듭니다.
• next start : 빌드된 Next 애플리케이션을 실행합니다.

터미널에 next dev를 입력하여 애플리케이션 개발 환경을 실행한 뒤 브라우저에서 localhost에 접속하면 Next.js를 소개하는 기본 페이지를 확인할 수 있습니다.
디렉토리의 구조를 확인하여 눈에 익히도록 합시다.

2. Next 수동으로 설치하기

프로젝트 디렉토리에서 yarn init -y 명령어를 통해 package.json파일을 생성하도록 합니다.

위 CNA 예제에서 본 바와 같이 Next 환경에 필요한 3가지 디펜던시를 프로젝트 디렉토리에서 설치해 주도록 합니다.

$ yarn add next react react-dom

package.json에 script 명령어들을 추가합니다.

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

이후 CNA 예제에서 만들어져 있던 pages라는 이름의 폴더를 루트 디렉토리에 만듭니다.
pages는 Next에서 라우팅을 담당하는 폴더입니다. 폴더에 js 파일을 만들면 파일명으로 경로가 생성됩니다.
pages 폴더에 index.js 파일을 만들면 브라우저에서 '/'의 경로를 갖게 됩니다.

index.js에 기본적인 컴포넌트를 만든 뒤 yarn dev 명령어로 실행시키고 localhost에 접속하면 Next 환경에서 애플리케이션이 실행되는 것을 확인할 수 있습니다.