Next.js14 프로젝트 개발 설정

Next.js 프로젝트 생성을 위한 개발 환경 및 설치

Mac OS Sequoia 15.1.1 (zsh shell)

Next.js 14.2.5

Node.js 18.20.5 LTS

Typescript 5.7.2

맥 인텔 칩 전용 Visual Studio Code 1.96 버전(2024년 12월 15일 기준) 직접 설치 방법

https://code.visualstudio.com/download

Download Visual Studio Code - Mac, Linux, Windows

터미널에서 아래 명령어를 실행하여 Visual Studio Code 통합개발환경 도구(IDE)가 설치되어 있는지 확인합니다.

code --version

 

설치되어 있으면 Visual Studio Code의 버전 정보가 출력됩니다.

1.96.0

 

설치되어 있지 않으면 아래와 같은 메시지가 나타납니다.

zsh: command not found: code

Visual Studio Code가 설치되지 않은 경우 Homebrew를 사용하여 설치

brew install --cask visual-studio-code

 

Visual Studio Code 실행 확인

Visual Studio Code 설치가 완료되면 터미널에서 Visual Studio Code를 열어 확인할 수 있습니다. 설치 및 확인이 완료되면 Visual Studio Code를 사용해 개발을 시작할 수 있습니다.

# 현재 디렉토리에서 VS Code 실행
code .

 

NVM(Node Version Manager) 활용한 Node.js 18.20.5 LTS 설치

https://nodejs.org/en/download/package-manager

Node.js — Download Node.js®

# nvm (Node Version Manager) 설치
curl -o- https://raw.githubusercontent.com/nvm-sh/nvm/v0.40.1/install.sh | bash

# Node.js 설치
nvm install 18

# Node.js 버전 18.20.5 확인
node -v

# npm 버전 확인
npm -v

NVM (Node Version Manager)는 Node.js의 버전을 관리하는 도구입니다. 하나의 시스템에서 여러 Node.js 버전을 설치하고, 필요에 따라 간단한 명령으로 버전을 전환해서 유연하게 개발을 할 수 있습니다. 예를 들어, Node Version Manager 활용한 Node.js 버전을 아래와 같이 설치 했다고 가정을 해보겠습니다. (2024년 12월 15일 기준 )

• v22.12.0 LTS
• v20.18.1 LTS
• v18.20.5 LTS

nvm을 통해 설치된 Node.js 버전 목록과 현재 사용 중인 버전을 확인할 수 있고, 최신 개발 환경 테스트 및 호환성 여부에 따라 Node.js 버전을 전환 및 관리할 수 있습니다.

# 확인
nvm list

# 결과
->     v18.20.5
       v20.18.1
       v22.12.0

default -> v22 (-> v22.12.0)
node -> stable (-> v22.12.0) (default)

# 버전 전환
nvm use 20

# 결과
       v18.20.5
->     v20.18.1
       v22.12.0

default -> v22 (-> v22.12.0)
node -> stable (-> v22.12.0) (default)

Typescript 전역 설치

npm i -g typescript

Typescript 설치 확인

# 확인
tsc -v

# 결과
Version 5.7.2

Next.js 14 프로젝트 생성

npx create-next-app@14.2.5 to-do-list

 

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

 

✔ Would you like to use TypeScript? … No / Yes
✔ Would you like to use ESLint? … No / Yes
✔ Would you like to use Tailwind CSS? … No / Yes
✔ Would you like to use `src/` directory? … No / Yes
✔ Would you like to use App Router? (recommended) … No / Yes
✔ Would you like to customize the default import alias (@/*)? › No / Yes

 

Success! Created to-do-list

Next.js 14 프로젝트 실행

cd to-do-list
# 실행
npm run dev

 

localhost:3000 실행 화면