[NextJS] NextJS 개발환경 설치 및 구축

본 설치 방법은 데비안 계열의 Ubuntu 운영체제를 기준으로 설명한다.

---

약어설명 :

• NVM (Node Version Manager)

---

1. 넥스트JS (NextJS)

• 설명
  • NextJS는 리액트(React) 기반의 SSR(서버 사이드 렌더링)과 SSG(적정 페이지 생성)을 쉽게 개발 할수 있도록 지원하는 프레임워크이다.
• 장점
  • 리액트(React) 기반의 개발이 가능하다.
  • SSR(서버 사이드 렌더링)과 CSR(클라이언트 사이드 렌더링)을 선택적인 개발이 가능하다.
  • SSG(정적 페이지 생성)이 가능하여 확장성이 높은 정적 사이트를 개발할 수 있다.
  • 동적 라우팅을 URL 기반으로 생성이 가능하다.
• 단점
  • 리액트(React) 및 NextJS에 대한 기본 이해가 필요하다.
  • SSR(서버 사이드 렌더링)에 대한 오버헤드 가능성이 있다.
  • 개발 프로젝트 규모가 커지면 빌드 시간이 증가한다.
• 개인적 의견
  • 개인적인 생각이지만 NextJS는 최신 웹 개발 기술 중에 매우 만족도고 높은 프레임워크 도구이다.
  • 컴포넌트 기반 접근 방식과 과 SSR/CSR에 대한 교차 사용이 가능한게 매우 만족스럽다.
• 공식 사이트

---

2. 설치 방법

• NVM 설치 명령어

# 의존성 설치
apt update
apt install -y curl

# NVM 설치 명령어
curl -o- https://raw.githubusercontent.com/nvm-sh/nvm/v0.39.5/install.sh | bash

# 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

• NVM NodeJS 설치 명령어

# NVM 현재 설치된 NodeJS 리스트 확인
nvm list

# NVM NodeJS v18 설치
nvm install 18

# NVM NodeJS v18 사용
nvm use 18

# NVM NodeJS v18 삭제
nvm uninstall 18

---

3. 프로젝트 생성

• 생성 명령어

# NextJS 프로젝트 생성 명령어
npx create-next-app@latest

# NextJS 프로젝트 생성 옵션
Need to install the following packages:
  create-next-app@13.4.19
Ok to proceed? (y) y
✔ What is your project named? … day_1_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

---

4. 프로젝트 실행

• 실행 명령어 (기본)

# NextJS 개발버전 실행
npm run dev

# NextJS 제품버전 빌드
npm run build

# NextJS 제품버전 실행
npm run start

# NextJS 소스 검사
npm run lint

• 실행 결과 (웹 브라우저)
  • 접속주소(기본) : http://localhost:3000
  • 접속주소(원격) : http://[IP주소]:3000

---

감사합니다.