[Next.js] 작성한 코드 실행하는 법(개발 서버 실행하는 법)

Running the Development Server

 

Next.js 의 개발 서버를 실행하는 법이다.

 

1. 최초 실행 시

 

프로젝트를 처음 생성하고, 최초로 서버 실행하기 전에만,

터미널에서 아래처럼 'pnpm i' 명령어를 통해, install을 해주고,

그 다음에 pnpm dev를 입력한다.

 

pnpm i
pnpm dev

 

 

pnpm i는 프로젝트를 처음 생성하고, '환경 준비(패키지 설치) 단계'라고 생각하면 된다.

pnpm i를 실행하면, package.jason을 읽고, 필요한 라이브러리들을 알아서 다운받아 설치한다.

설치되는 곳은 node_modules 폴더.

 

일반적으로 다른 사람과 협업을 하면서, package.jason이 바뀌지 않는 이상, 

다시 pnpm i 를 실행할 일은 없다.

 

 

 

2. 최초 실행 후부터

pnpm dev

 

 

여기까지 했으면, 이제 웹 브라우저에서 아래 url로 접속해준다.

 

http://localhost:3000/

 

그러면 작성한 next.js 프로젝트가 보일 것이다.

 

 

 

 

Next.js 전에는 'Liver Server'라는 VSCode 익스텐션을 이용해서, 단축키 'Command + L + O'로 열었을텐데,

 

Next.js 는 이렇게 열어도 아무 것도 볼 수 없다.

 

Live Server는 정적파일(HTML, CSS, JS)을 그냥 서빙만 하기 때문이라고.

 

주소도 'http://127.0.0.1:5500' 같은 포트로 다르다.

 

 

 

Live Server, Next.js Dev Server의 차이점

 

Next.js는 SSR

 

• Live Server (VSCode 확장)
  • 정적 파일(HTML/CSS/JS)을 그냥 서빙만 함.
  • 주소 예: http://127.0.0.1:5500 같은 포트.
  • 번들링/SSR/HMR/라우팅 처리 없음.
  • SPA(리액트)도 “CDN으로 HTML 한 장짜리” 실습일 때만 적합.

 

• React/Vite Dev Server
  • Vite가 번들링 + HMR 제공.
  • 기본 주소: http://localhost:5173.
  • pnpm dev(또는 npm run dev)로 실행.

 

• Next.js Dev Server
  • React + SSR/파일 기반 라우팅/이미지 최적화 등 제공.
  • 기본 주소: http://localhost:3000
  • pnpm dev(또는 npm run dev)로 실행.
  • SSR 필요하므로 Live Server로는 절대 대체 불가

 

 

* SSR (Static Site Generation)

   서버가 먼저 HTML을 만들어서 내려주는 방식을 말한다.

   만들어진(완성된) HTML을 웹 브라우저에 보내주니, 속도가 빠르다.

   Next.js는 SSR 쉽게 지원하는 프레임워크인 것