Next.js 시작하기

 

📖  목차

 

create-next-app 설치

먼저 Next.js를 사용한 프로젝트를 생성하기 위해서는 create-next-app을 먼저 설치해야한다.

문득 드는 생각인데,,, create-react-app을 CRA라고 부르는 것 처럼 create-next-app도 CNA라고 부를까,,?🤔 (오 그렇다고 합니다...!!!)

npm install -g create-next-app

설치 완료 후 정상적으로 설치가 되었는지 다음 명령어를 통해 확인한다.

$ create-next-app --version
12.1.6

 

create-next-app 생성

이제 위에서 설치한 create-next-app을 사용하여 아래 명령어를 실행하여 Next.js 프로젝트를 생성해보자!

npx create-next-app --typescript mypage(project명)

 

Next.js페이지 실행

프로젝트가 생성이 완료되면 프로젝트 실행에 관한 친절한 메세지가 출력된다.

Success! Created portfolio at ...
Inside that directory, you can run several commands:

  yarn dev
    Starts the development server.

  yarn build
    Builds the app for production.

  yarn start
    Runs the built app in production mode.

We suggest that you begin by typing:

  cd portfolio
  yarn dev

 

폴더로 들어가서 yarn dev하세요! (so친절,,)

이렇게 친절하게 알려줘도 굳이 들어가서 yarn start하는 사람이 있다?

(나)

........🤭

 

생성된 프로젝트의 package.json을 확인해보면 사용 가능한 스크립트가 기본으로 들어가있다.

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

• dev: Next.js 프로젝트를 개발 모드(development mode)로 실행합니다.
• build: Next.js 프로젝트를 production mode로 빌드합니다.
• start: Next.js 프로젝트를 productoin mode로 실행합니다.
• lint: Next.js에 기본 설정된 ESLint 설정을 사용하여 ESLint를 실행합니다.

 

새롭게 생성한 Next.js 프로젝트를 실행하기 위해서 다음의 명령어를 실행한다.

yarn dev
또는
npm run dev

 

위 명령어가 정상적으로 실행되면 http://localhost:3000 에서 다음과 같은 화면이 표시되며 앞으로 가꿔나갈 프로젝트가 준비되었습니다! 아쟈쟈😆🔥