[Next.js] 프로젝트 생성 및 시작 방법

Next.js를 사용하는 프로젝트 생성 하는 방법에 대해 알아보겠습니다.

시스템 요구 사항

• Node.js 14.6.0 이상
• MacOS, Windows(WSL 포함) 및 Linux 가 지원됩니다.

프로젝트 생성

리액트 프로젝트를 생성하는 방법과 비슷하게 create-next-app 명령어를 사용합니다. @latest 를 추가하면 최신 버전으로 프로젝트를 생성합니다.

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

TypeScript 프로젝트로 시작하려면 --typescript 옵션을 추가합니다.

npx create-next-app@latest --typescript
# or
yarn create next-app --typescript

위의 방법으로 프로젝트를 생성해 보겠습니다.

D:\project\Study>npx create-next-app@latest
√ What is your project named? ... nextjs-intro
√ Would you like to use TypeScript with this project? ... No / Yes
√ Would you like to use ESLint with this project? ... No / Yes
√ Would you like to use `src/` directory with this project? ... No / Yes
√ Would you like to use experimental `app/` directory with this project? ... No / Yes
√ What import alias would you like configured? ... @/*
Creating a new Next.js app in D:\project\Study\nomadcoders\nextjs-intro.

Using npm.

Installing dependencies:
- react
- react-dom
- next
- @next/font
- eslint
- eslint-config-next


added 264 packages, and audited 265 packages in 25s

102 packages are looking for funding
  run `npm fund` for details

found 0 vulnerabilities

Initializing project with template: default

Success! Created nextjs-intro at D:\project\Study\nextjs-intro

프로젝트 이름을 입력하고 TypeScript와 ESLint 사용 여부를 선택하면 프로젝트가 성공적으로 생성됩니다.

시작

프로젝트 기본 구조입니다.

다음 명령어를 실행하여 개발 서버를 시작합니다.

npm run dev
# or
yarn dev

개발 서버가 구동되면 http://localhost:3000에 접속하여 확인합니다.

참고

• https://nextjs.org/docs/getting-started