tutorial2026-05-01

Next.js 시작하기: App Router 기초

Next.js App Router의 기본 개념과 프로젝트 구조를 알아봅니다.

Next.js 시작하기: App Router 기초

Next.js는 React 기반의 풀스택 프레임워크로, 최신 버전에서는 App Router를 도입했습니다.

App Router란?

App Router는 Next.js 13.4부터 안정화된 라우팅 시스템입니다.

주요 특징

서버 컴포넌트 기본 지원
파일 기반 라우팅 (app/ 디렉토리)
레이아웃 시스템 (중첩 레이아웃)
스트리밍 및 서스펜스 지원

// app/layout.js - 기본 레이아웃
export default function RootLayout({ children }) {
  return (
    <html lang="ko">
      <body>{children}</body>
    </html>
  );
}

프로젝트 구조

my-app/
├── app/
│   ├── layout.js      # 루트 레이아웃
│   ├── page.js        # 홈 페이지
│   └── posts/
│       ├── page.js    # 포스트 목록
│       └── [slug]/
│           └── page.js # 개별 포스트
├── components/        # 공유 컴포넌트
├── content/          # 마크다운 파일
└── public/           # 정적 파일

더 자세한 내용은 다음 포스트에서 계속됩니다!