6단계 — Next.js App Router

Next.js 16 의 App Router 는 폴더 = 라우트 입니다. app/about/page.tsx 를 만들면 자동으로 /about URL 이 생겨요.

폴더 한 번만 보면 끝

app/
├── layout.tsx         ← 모든 페이지를 감싸는 틀 (헤더·푸터 등)
├── page.tsx           ← / (홈)
├── about/
│   └── page.tsx       ← /about
└── blog/
    ├── page.tsx       ← /blog (목록)
    └── [slug]/
        └── page.tsx   ← /blog/[slug] (상세, 동적 라우트)

대괄호 [slug] 는 동적 세그먼트 — 어떤 값이든 들어올 수 있어요.

Server vs Client 컴포넌트

App Router 는 기본이 Server Component 입니다. DB 조회·API 호출이 컴포넌트 안에서 직접 가능해요.

// app/page.tsx (Server, 기본)
async function getMessage() {
  return { text: "서버에서 만든 문자열" };
}

export default async function Home() {
  const data = await getMessage(); // ← 서버에서 실행
  return <p>{data.text}</p>;
}

마우스·타이핑·useState 같은 브라우저 일이 필요할 때만 파일 첫 줄에 "use client" 를 붙여 Client 로 전환합니다.

// app/counter.tsx (Client)
"use client";
import { useState } from "react";

export default function Counter() {
  const [n, setN] = useState(0);
  return <button onClick={() => setN(n + 1)}>{n}</button>;
}

데이터를 받아 그리는 흐름

서버 컴포넌트에서 fetch → 결과를 props 로 자식에게 → 자식이 그림. 한 방향이에요.

async function Posts() {
  const res = await fetch("https://api.example.com/posts");
  const posts = await res.json();
  return (
    <ul>
      {posts.map((p) => <li key={p.id}>{p.title}</li>)}
    </ul>
  );
}

직접 해 보기

pnpm create next-app@latest 로 프로젝트를 만들고 app/about/page.tsx 를 직접 추가해 보세요. /about 으로 들어가면 자동으로 그 페이지가 보여요.

더 깊이

• Next.js App Router 노트
• nextjs-fullstack 강좌 — Next 에 DB 까지 잇기

다음 단계

7단계에서는 디자인을 클래스 로 박아 일관성을 잡는 Tailwind 를 만나요.