Next.js 14 App Router 실전 적용기

Next.js 14의 App Router를 실제 프로젝트에 적용하면서 경험한 내용을 공유합니다.

App Router란?

Next.js 13부터 도입된 새로운 라우팅 시스템입니다. 기존 Pages Router와 비교해 여러 장점이 있습니다:

• React Server Components 지원
• 중첩 레이아웃
• 스트리밍
• 병렬 라우트

적용하면서 겪은 문제들

1. 클라이언트 컴포넌트 분리

Server Components가 기본이 되면서, 상태나 이벤트 핸들러가 필요한 부분은 use client를 명시해야 합니다.

'use client';

import { useState } from 'react';

export function Counter() {
  const [count, setCount] = useState(0);
  return <button onClick={() => setCount(c => c + 1)}>{count}</button>;
}

2. 메타데이터 관리

페이지별 메타데이터는 generateMetadata 함수로 관리합니다.

export async function generateMetadata({ params }) {
  const post = await getPost(params.slug);
  return {
    title: post.title,
    description: post.description,
  };
}

3. 로딩 상태 처리

loading.tsx 파일로 로딩 UI를 쉽게 구현할 수 있습니다.

// app/blog/loading.tsx
export default function Loading() {
  return <div>로딩 중...</div>;
}

결론

App Router는 초기 학습 곡선이 있지만, 익숙해지면 더 직관적인 프로젝트 구조와 성능 최적화가 가능합니다. 신규 프로젝트라면 App Router 사용을 권장합니다.