Next.js Git Blog (1): 개발 환경 구성

개요#

Next.js로 블로그를 만들면서 새롭게 알게 된 기술적인 내용들과, 구성 과정에서 고민했던 부분을 기록하고 공유하고자 한다.

소개#

먼저 간단히 Next.js에 대해 짚고 넘어가자면, React 기반의 웹 애플리케이션을 서버 사이드 렌더링(SSR) 및 정적 사이트 생성(SSG) 형태로 만들 수 있게 도와주는 프레임워크다.
개발자 경험이 좋아 다양한 곳에서 애용한다고 알고 있다. 나도 이번 블로그 개발을 계기로 좀 더 관심을 가져보고자 한다.

사전 준비#

본격적으로 프로젝트를 생성하기에 앞서, 몇 가지 사전 준비가 필요하다.

• Node.js 설치
  Next.js는 JavaScript 기반의 프레임워크이므로 Node.js가 필수적이다. 가능한 경우, NVM(Node Version Manager)을 사용하여 Node.js 버전을 쉽게 설치하고 관리하는 것을 추천한다.

• 패키지 매니저
  Node.js를 설치하면 기본적으로 npm이 함께 제공된다. 하지만 yarn이나 pnpm과 같은 다른 패키지 매니저를 사용해도 무방하다.
  이 글에서는 pnpm을 기준으로 설명할 예정이다.

프로젝트 생성#

터미널에서 프로젝트를 생성할 디렉토리로 이동한 뒤, 아래 명령어를 입력한다.

pnpm create next-app

명령어 실행 시, Next.js 프로젝트 설정에 대한 여러 가지 선택지가 나타난다. 나의 경우 아래와 같이 선택했다:

√ 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 your code inside a `src/` directory? ... No / (Yes)
√ Would you like to use App Router? (recommended) ... (No) / Yes
√ Would you like to use Turbopack for `next dev`? ... No / (Yes)
√ Would you like to customize the import alias (`@/*` by default)? ... No / (Yes)
√ What import alias would you like configured? ... (@/*)

📌 App Router vs Pages Router

Next.js에는 페이지 라우팅 방식이 두 가지 있다:

• App Router (새로운 방식, 디렉토리 기반)
• Pages Router (기존 방식, 파일 기반)

나는 정적 사이트로 배포할 예정이므로, App Router는 사용하지 않도록 설정했다.

프로젝트 확인#

그리고 잠시 기다리면 아래와 같은 구조의 폴더 및 파일들이 생성된다.

root
├── README.md
├── eslint.config.mjs
├── next-env.d.ts
├── next.config.ts
├── node_modules
├── package.json
├── pnpm-lock.yaml
├── postcss.config.mjs
├── public
├── src
│   ├── pages
│   │   ├── _app.tsx
│   │   ├── _document.tsx
│   │   ├── api            # (Pages Router에서는 사용하지 않으므로 삭제함)
│   │   │   └── hello.ts
│   │   └── index.tsx
│   └── styles
│       └── globals.css
└── tsconfig.json

일반적인 React 프로젝트와 구조가 유사해 어렵지 않게 이해할 수 있었다. 그리고 api 폴더의 경우 Page router 방식에서는 사용하지 않는다고 하여 삭제했다.
이제 아래 명령어를 입력해 개발 서버가 정상적으로 실행되는지 확인한다:

pnpm run dev

터미널에 아래와 같은 메시지가 출력되면, 명시된 주소를 통해 완성된 초기 화면을 확인할 수 있다:

> next dev --turbopack
 
   ▲ Next.js 15.3.4 (Turbopack)
   - Local:        http://localhost:3000
   - Network:      [your_network_address]
 
 ✓ Starting...
 ✓ Ready in 1513ms

아래는 정상적으로 실행된 개발 서버 초기 화면이다:

그림 1. Next.js 개발 서버가 정상적으로 실행된 모습

여기까지가 프로젝트 기본 생성 및 초기 실행 과정이다. 다음 글에선 페이지 간 라우팅 구성 방법에 대해 살펴보도록 하겠다.