NEXT 시작하기

첨 Next.js를 접했다면 먼저 learn course 로 시작해라. 코스와 상통하는 퀴즈들은 Next.js를 사용하기위한 모든 것을 가이드해준다.

요구사항

• Node.js >= 10.13
• MacOs, Windows (including WSL), Linux

설치

create-next-app을 사용하는것을 추천한다. 이건 모든것을 자동으로 설치해준다. 프로젝트 생성은 run:

npx create-next-app
# or
yarn create next-app

설치가 완료되면 설치가이드에 따라 로컬호스트를 실행해라. pages/index.js를 수정해보고 결과를 브라우저로 확인해라

좀 더 상세한 create-next-app의 사용 정보는 document를 확인해라

수동설치

프로젝트의 다음을 run:

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

package.json을 열고 다음 scripts를 추가해라

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

scripts는 application의 개발단계들을 가리킨다.

• dev -next dev는 development mode를 가리킨다.
• build -next build는 production mode를 위한 application의 빌드를 가리킨다.
• start -next start는 Next.js의 production server의 시작을 가리킨다.

Next.js는 pages의 컨셉에 따라 빌드된다. 각 페이지는 pages 디렉토리의 .js, .jsx, .ts or .tsx 파일들로부터 추출된 React Component이다.

각 Pages들은 그들의 파일명을 기반한 라우트와 관련된다. 예를 들면 pages/about.js는 /about 에 매핑된다. 또한 동적 라우트 파라미터로 파일명을 지을수도 있다.

pages 디렉토리를 프로젝트에 생성해라.

./pages/indes.js를 다음컨텐츠로 채워라.

function HomePage() {
  return <div>Welcome to Next.js!</div>
}

export default HomePage

로컬호스트를 실행하기위해서는 npm run dev or yarn dev. http://localhost:3000 을 방문해라.

현재까지 알아본것은:

• Automatic compilation and bundling (with webpack and babel)
• React Fast Refresh
• Static generation and server-side rendering of ./pages/
• Static file serving. ./public/ is mapped to /

추가로 운영환경을 위해 준비된 Next.js app은 Deployment documentation을 읽어봐라.

관련자료

아래 나열된 섹션들을 통해 Next.js를 시작하기 위한 추가 정보를 확인할 수 있다.

• Pages: Next.js의 pages의 대해 더 배워보자
• CSS Support: built-in CSS 를 통해 스타일을 커스텀화해보자
• CLI: Next.js의 CLI를 더 알아보자.