2️프로젝트 환경 설정

코드 에디터 선택

코드 에디터는 VSCode를 사용합니다.

Node.js 설정

Next.js는 Node.js 16.14 이상을 필요로 합니다. 저희는 23년 8월 기준 LTS인 18.17.0을 사용하는 것으로 하겠습니다. Node.js는 노드 버전 관리 도구인 NVM을 사용합니다. 다른 버전 관리 도구를 사용하셔도 무방합니다.

노드 패키지 관리 도구

패키지 관리 도구는 npm을 사용합니다. 이 역시 yarn이나 pnpm 같은 다른 도구를 사용하셔도 무방합니다.

CLI 사용하기

CLI 도구인 create-next-app을 사용해서 Next.js를 쉽게 시작할 수 있습니다.

npx create-next-app <project-name>

위의 명령어를 입력하면 설정에 필요한 몇가지 질문을 받습니다. 이번 강의를 위해서 어떻게 답해야하는지 살펴보죠.

create-next-app 설치를 위한 질문이 나오는 경우도 있을텐데 이때는 y를 입력하시면 됩니다.

Need to install the following packages:
  create-next-app@13.4.13
Ok to proceed? (y) y

프로젝트 이름 설정

create-next-app 이 정상적으로 실행되면 프로젝트 이름을 묻는 질문이 가장 처음 나옵니다. 지금은 아무 이름이나 입력하셔도 좋습니다.

What is your project named?  <project-name>

함께 사용할 도구 설정

이어서 함께 TypeScript, ESLint, Tailwind CSS 사용 여부를 묻는 질문이 나옵니다. 앞선 두 가지는 Yes를 그리고 TailwindCSS는 No를 선택해주세요.

Would you like to use TypeScript?  Yes
Would you like to use ESLint?  Yes
Would you like to use Tailwind CSS?  No

디렉토리 설정

다음으로 나오는 질문은 src 디렉토리와 App Router 사용 여부를 묻습니다. Yes를 선택합니다.

Would you like to use `src/` directory?  Yes
Would you like to use App Router? (recommended)  Yes

import 설정

끝으로 폴더 경로에 사용자 정의 별칭(alias)을 사용 여부를 묻습니다. No를 선택하세요.

프로젝트 실행하기

CLI를 통해 필요한 패키지를 모두 설치한 프로젝트 디렉토리로 이동해 아래의 명령어를 입력합니다. 서비스가 정상적으로 준비되면 https://localhost:3000으로 이동해 서비스를 확인합니다.

npm run dev

// - ready started server on [::]:3000, url: http://localhost:3000

만약 정상적으로 실행되지 않는다면 Node 버전(node -v)을 확인해보세요.