Next.js 프로젝트를 시작하는 방법

2022-12-28

안녕하세요.

이번 시간에는 Next.js 프로젝트를 시작하는 방법에 대해서 알아보겠습니다.

Next.js 프로젝트를 시작하려면 터미널에 다음 명령어를 실행해서 Next.js를 설치합니다.

$ npx create-next-app@latest

Next.js 프로젝트에 TypeScript를 사용하려면 터미널에 다음 명령어를 실행해서 TypeScript를 지원하는 Next.js를 설치합니다.

$ npx create-next-app@latest --typescript

npm init으로 package.json 파일만 생성된 프로젝트에서 next.js를 설치하려면 다음 명령어를 실행합니다.

$ yarn add next react react-dom

그리고 package.json 파일의 scripts 코드를 다음과 같이 업데이트 합니다.

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

여기까지가 Next.js 를 설치하는 방법 3가지 방법입니다.

그리고 사용하는 가장 기초적인 방법은 프로젝트 폴더의 가장 최상위에 pages 폴더를 만들고 그 안에 index.js 파일을 만들거나 수정하여 사용합니다.

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

export default HomePage

그리고 개발 환경 프리뷰를 보려면 다음 명령어를 실행합니다.

$ yarn dev

그리고 배포하기위해서 프로젝트를 빌드하려면 다음 명령을 실행합니다.

$ yarn build

그리고 배포를 하려면 다음 명령어를 실행합니다.

$ yarn start

이렇게 Next.js 프로젝트를 시작하는 방법에 대해서 알아봤습니다.

감사합니다.