[Next.js 입문] 시작하기 및 기본 사용법

Next.js  프로젝트 시작하기

1. create-next-app 설치

npm install -g create-next-app

2.  프로젝트 생성

 Next.js 프로젝트를 생성할 디렉토리로 이동 후 다음과 같이 입력하면 된다.

npx create-next-app@latest

npx create-next-app@latest project_name //project_name으로 프로젝트 생성

 혹시 typescript를 같이 사용하고 싶으면 --typescript 를 추가해주면 된다.

npx create-next-app@latest --typescript

그리고 프로젝트 이름을 입력하지 않았다면 다음과 같이 프로젝트 이름을 물어본다.

3. 프로젝트 실행

 생성된 프로젝트를 살펴보면 package.json 파일이 있을 것이다. 기본적으로 작성되어 있는 다음과 같은 script들이 보일 것이다.

"scripts": {
    "dev": "next dev", // 개발 모드(development mode) 실행
    "build": "next build", // production mode로 빌드
    "start": "next start", // productoin mode로 실행
    "lint": "next lint" // 기본적으로 설정된 ESLint 설정을 사용하여 ESLint를 실행
  },

 

 그럼 우선 개발자 모드로 실행해보자.

npm run dev

그리고 웹 브라우저에서 http://localhost:3000/ 로 접속해보면 Next.js 기본 화면이 출력된다.