K
Knot
내 노트/Next.js 14 App Router 완전 정복
편집
Next.jsSSR2일 전2,100자
💻

Next.js 14 App Router 완전 정복

App Router란?

Next.js 13+에서 도입된 새로운 라우팅 방식으로, app/ 디렉토리 기반으로 동작합니다.

Server vs Client Component

  • Server Component: 기본값. 서버에서만 렌더링. 번들 크기 ↓
  • Client Component: 파일 상단에 'use client' 선언 필요

특수 파일들

  • page.tsx: 라우트의 UI
  • layout.tsx: 공유 레이아웃
  • loading.tsx: 로딩 UI (Suspense)
  • error.tsx: 에러 UI
  • not-found.tsx: 404 UI

데이터 페칭

// Server Component에서 직접 async/await
async function Page() {
  const data = await fetch('https://api.example.com/data');
  return <div>{data}</div>;
}