Next.js 16 App Router 시작하기

App Router의 핵심 개념

Next.js 16의 App Router는 React Server Components를 기본으로 사용합니다. 이는 서버에서 렌더링되는 컴포넌트와 클라이언트에서 실행되는 컴포넌트를 명확히 구분할 수 있게 해줍니다.

Server Components vs Client Components

Server Components는 서버에서만 실행되므로 번들 크기에 영향을 주지 않습니다.

// Server Component (기본)
export default async function Page() {
  const data = await fetchData();
  return <div>{data.title}</div>;
}

Client Component가 필요한 경우 "use client" 지시어를 사용합니다.

"use client";
 
import { useState } from "react";
 
export function Counter() {
  const [count, setCount] = useState(0);
  return <button onClick={() => setCount(count + 1)}>{count}</button>;
}

라우팅 구조

App Router는 파일 시스템 기반 라우팅을 사용합니다:

Tip: layout.tsx는 네비게이션 시에도 리렌더링되지 않으므로, 공통 UI를 넣기에 적합합니다.

데이터 페칭

Server Components에서는 async/await를 직접 사용할 수 있습니다:

async function getPosts() {
  const res = await fetch("https://api.example.com/posts", {
    next: { revalidate: 3600 }, // 1시간마다 재검증
  });
  return res.json();
}

정리

• Server Components를 기본으로 사용하고, 인터랙션이 필요할 때만 Client Component를 사용하세요
• 파일 기반 라우팅으로 직관적인 구조를 유지하세요
• 데이터 페칭은 Server Component에서 직접 수행하세요