2단계: Next.js 프로젝트 생성과 구조 이해

Next.js 프로젝트 생성과 구조 이해

Next.js의 핵심은 파일 기반 라우팅과 SSR/SSG 지원 구조입니다.
이 단계에서는 프로젝트를 생성하고 기본 폴더 구조와 라우팅 시스템을 이해합니다.

2-1. Next.js 프로젝트 생성

npx create-next-app@latest my-next-app
cd my-next-app
npm run dev

• 기본 포트는 http://localhost:3000입니다.
• --typescript, --tailwind 등의 옵션도 함께 제공됩니다.

2-2. 디렉토리 구조 이해

my-next-app/
├── app/            # App Router (Next.js 13+)
├── pages/          # Pages Router (기존 방식)
├── public/         # 정적 파일 폴더 (favicon, 이미지 등)
├── styles/         # CSS 파일
├── node_modules/
├── next.config.js  # 설정 파일
├── package.json

pages 폴더

• /pages/index.js → /
• /pages/about.js → /about
• 파일 이름이 URL 경로로 자동 매핑됩니다.

public 폴더

• /public/logo.png → /logo.png로 직접 접근 가능
• 이미지, 아이콘 등 정적 리소스를 관리

2-3. Pages Router vs App Router

초보자는 Pages Router부터 학습하고, App Router는 레이아웃 중심 프로젝트에 적합합니다.

2-4. 기본 페이지 생성 예시

// pages/index.js
export default function Home() {
  return <h1>홈페이지입니다</h1>;
}

// pages/about.js
export default function About() {
  return <h1>소개 페이지</h1>;
}

페이지 간 이동:

import Link from "next/link";

<Link href="/about">소개</Link>

2-5. 타입스크립트로 설정하려면?

npx create-next-app@latest --typescript

• 자동으로 tsconfig.json 생성
• 컴포넌트 파일이 .tsx로 구성됩니다

요약

• create-next-app 명령어로 프로젝트를 빠르게 시작할 수 있습니다.
• /pages 폴더는 URL과 1:1 매핑되는 파일 기반 라우팅입니다.
• public 폴더는 정적 자산을 제공하며 직접 접근 가능합니다.
• Pages Router와 App Router는 라우팅 구조와 데이터 패칭 방식에서 차이가 있습니다.

심화학습

Q1. Next.js의 파일 기반 라우팅은 전통적인 React Router와 어떤 차이가 있을까?

A: React Router는 개발자가 직접 라우팅 정의를 구성하지만, Next.js는 파일 이름을 기반으로 자동 라우팅을 구성합니다. 유지보수와 생산성이 높습니다.

Q2. App Router는 어떤 구조에 적합하며, 프로젝트에서 언제 전환하면 좋을까?

A: 다중 레이아웃이나 RSC(Server Component) 기반 설계가 필요한 프로젝트에 적합합니다. 초기엔 Pages Router로 시작하고, 복잡도가 올라가면 App Router로 전환합니다.

Q3. public 폴더와 static 파일은 CDN과 어떤 연관성을 가질 수 있을까?

A: public 폴더의 파일은 정적 자산으로 CDN을 통해 효율적으로 캐싱 및 배포할 수 있습니다. 경로는 /파일명으로 간단하게 접근됩니다.