Next.js 13 App Router가 뭐가 달라졌나요?

Next.js 13 App Router 주요 변경:

• app/ 디렉토리 — pages/ 대신 app/ 사용
• 서버 컴포넌트 기본 — 모든 컴포넌트가 기본적으로 서버에서 렌더
• 클라이언트 컴포넌트 — "use client" 선언 필요
• layout.tsx — 공유 레이아웃 (중첩 가능)
• loading.tsx — 로딩 UI 자동 처리 (Suspense)
• error.tsx — 에러 바운더리 자동

// app/posts/page.tsx (서버 컴포넌트)
async function PostsPage() {
  const posts = await fetch("https://api.example.com/posts");
  const data = await posts.json();
  return <ul>{data.map(p => <li key={p.id}>{p.title}</li>)}</ul>;
}

// app/posts/layout.tsx
export default function Layout({ children }) {
  return <div className="container">{children}</div>;
}

서버 컴포넌트 덕분에 번들 크기가 크게 줄고 초기 로딩이 빨라집니다.