[Next.js]설치 및 개발환경 세팅

작년부터 자바스크립트를 조금씩 배워보고있는데 요즘 많이들 쓴다는 Next.js도 한번 배워놓아보려고 한다. Next.js는 React 기반이라 React에서 활용하던 문법을 사용할 수 있고, 풀스택 프레임워크라 프론트엔드와 백엔드를 하나의 프레임워크를 사용해서 짤 수 있는게 장점이다. 그리고 SSR(어디서 보기로는 CSR으로도 구현할 수 있다고 듣긴했는데 대부분 SSR로 활용하는 듯 하다)이기 때문에 초기 로딩 속도나 검색 노출(SEO 최적화)에 있어서 유리한 부분들이 있어 지금 회사에서도 FE의 프레임워크는 Next.js 기반으로 가져가려고 하는 듯 하다.

 

 

각설하고 Next.js를 사용하기 위한 설치 과정과 개발환경 세팅 방법을 간단하게 정리해두려고 한다.

 

1. Next.js 설치 방법

Next.js를 설치하기 위해서는 먼저 Node.js를 설치해야한다(다음 링크 참조). 현재 기준으로 LTS 버전인 22.12.0 버전을 설치하기 위해서는 아래 명령어를 터미널에서 차례대로 실행하면 된다.

# Download and install nvm:
curl -o- <https://raw.githubusercontent.com/nvm-sh/nvm/v0.40.1/install.sh> | bash

# Download and install Node.js:
nvm install 22

# Verify the Node.js version:
node -v # Should print "v22.12.0".
nvm current # Should print "v22.12.0".

# Verify npm version:
npm -v # Should print "10.9.0".

 

 

참고로 위의 curl 명령어로 nvm 설치 후에도 zsh: command not found: nvm 에러가 뜬다면 터미널을 껐다 켜거나 아래 명령어를 실행해주면 된다.

export NVM_DIR="$HOME/.nvm"
[ -s "$NVM_DIR/nvm.sh" ] && \\. "$NVM_DIR/nvm.sh"  # This loads nvm
[ -s "$NVM_DIR/bash_completion" ] && \\. "$NVM_DIR/bash_completion"  # This loads nvm bash_completion

 

 

나는 Node.js를 너무 예전에 다운받아서 업데이트를 해보려고 한다. 현재 설치 가능한 버전들은 아래 명령어로 확인할 수 있다.

nvm ls-remote

 

 

nvm(Node Version Manager)를 이용해 Node.js의 최신 버전 혹은 가장 최근에 출시된 LTS 버전을 다운로드 받을 수 있다.

nvm install --lts # LTS 버전 설치
nvm install node # 최신 버전 설치

 

 

nvm을 통해 여러 버전이 해당 환경에 설치된 경우 어떤 버전을 사용할지 nvm use 명령어를 사용해 지정할 수 있다.

nvm use node # 최신 버전 사용
nvm use --lts # LTS 버전 사용

 

 

그리고 기본 버전 설정을 변경하려면 아래 명령어를 활용하면 된다.

nvm alias default <version명>

 

 

2. Next.js 프로젝트 시작

그리고 Next.js 프로젝트를 생성하기 위해서는 다음 명령어를 실행한다.

npx create-next-app@14

 

 

참고로 프로젝트 실제 생성 전 프로젝트 생성을 위한 몇 가지 정보를 입력하게 되어있다.

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

✔ What is your project named? … demo-project
✔ 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
Creating a new Next.js app in /Users/jinipark/Downloads/git-related/codingapple-nextjs/demo-groceryapp.

Using npm.

Initializing project with template: app 

Installing dependencies:
- react
- react-dom
- next

added 21 packages, and audited 22 packages in 18s

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

found 0 vulnerabilities
npm notice
npm notice New major version of npm available! 10.9.0 -> 11.0.0
npm notice Changelog: <https://github.com/npm/cli/releases/tag/v11.0.0>
npm notice To update run: npm install -g npm@11.0.0
npm notice
Success! Created demo-groceryapp at /Users/Downloads/git-related/demo-groceryapp

A new version of `create-next-app` is available!
You can update by running: npm i -g create-next-app

 

 

생성한 웹페이지를 미리보기하려면 코드를 실행해야하는데 아래 명령어를 붙여 넣은 뒤 출력되는 주소를 브라우저에 붙여넣으면 된다.

npm run dev