Next.js 14 버전 설치 및 프로젝트 생성하기

실행 환경 설정

Next.js 14버전은 node버전이 18.17 이상이어야 합니다. 따라서, n 패키지 또는 nvm을 통해 node 버전을 18.17로 설치 및 변경해줍니다. node 버전을 어떻게 변경해야 하는지 모르시는 분은 아래 글을 참고해주세요.

macos에 nodejs 설치하기 (쉽게 node 버전 변경하기)

 

n 패키지를 이용하여 node 버전을 변경합니다. 그리고 버전이 제대로 변경됐는지 확인해봅시다.

sudo n 18.19.0
node -v

 

프로젝트 생성 및 실행

프로젝트 생성

node 버전을 변경했으면, npx create-next-app 를 이용하여 프로젝트를 생성합니다.

 

npx create-next-app@latest

 

프로젝트를 생성하기 위해 설정 값을 물어보는데, 본 글에서는 모두 기본값으로 설정했습니다.

콘솔을 이용하여 프로젝트 생성

 

프로젝트 설정 값 상세 설명

1. What is your project named?: 프로젝트 이름 설정
2. Would you like to use TypeScript?: 타입스크립트 사용여부 (기본값 Yes)
3. Would you like to use ESLint?: ESLint 사용여부 (기본값 Yes)
4. Would you like to use Tailwind CSS?: tailwindcss 사용여부 (기본값 Yes)
   1. Next.js는 tailwindcss를 기본적으로 제공해주기 때문에 따로 css를 위한 라이브러리 혹은 설정이 필요 없습니다. (매우 편리함)
5. Would you like to use `src/` directory?: src 디렉토리 사용여부 (기본값 Yes)
   1. 프로젝트 root에 있는 프로젝트 구성 파일(package.json 등)과 Application 코드를 분리 할 수 있기 때문에 사용하는 것을 권장드립니다. (이전에는 기본값이 No라서 따로 Yes로 바꿔줬었는데 버전이 올라가면서 기본 값이 바뀌었네요)
6. Would you like to use App Router? (recommended): app routing 방식 사용여부 (기본 값 Yes)
7. Would you like to customize the default import alias (@/*)?: root 경로 import aliasing 말고 커스텀하게 import alias를 사용할지 여부 (기본 값 No)

 

프로젝트 실행

프로젝트 생성은 끝났고, 실행해봅시다.

cd my-app
yarn install
yarn dev

 

아래와 같이 Ready 가 완료된 문구가 나오면 정상적으로 실행이 된 것이기 때문에, http://localhost:3000으로 접속을 해봅시다.

앱 실행하기

 

정상적으로 프로젝트가 실행된 것을 확인했습니다.

첫 Next.js 프로젝트 실행 화면

 

무료 호스팅하기

[Next.js] vercel에 Next.js 웹 앱 프로젝트 무료 호스팅하기