블로그로 돌아가기

Next.js App Router 완벽 가이드

2023년 11월 20일

#Next.js#React#웹개발
Next.js App Router 완벽 가이드

Next.js 13에서 소개된 App Router는 기존의 Pages Router를 대체하는 새로운 라우팅 시스템입니다. 이 글에서는 App Router의 주요 기능과 사용 방법에 대해 알아보겠습니다.

App Router 소개

App Router는 React 18의 새로운 기능들을 활용하여 더 효율적인 라우팅 시스템을 제공합니다. 특히 React Server Components를 기본적으로 지원하여 서버 사이드 렌더링과 클라이언트 사이드 렌더링을 더 효과적으로 조합할 수 있게 해줍니다.

폴더 기반 라우팅

App Router는 폴더 기반 라우팅 시스템을 사용합니다. 'app' 디렉토리 내에 폴더를 생성하면 해당 폴더 이름이 URL 경로가 됩니다.

app/
  page.tsx         // '/' 경로
  about/
    page.tsx       // '/about' 경로
  blog/
    page.tsx       // '/blog' 경로
    [slug]/
      page.tsx     // '/blog/:slug' 경로

레이아웃

App Router에서는 레이아웃을 쉽게 구현할 수 있습니다. 'layout.tsx' 파일을 생성하면 해당 폴더와 그 하위 폴더의 모든 페이지에 레이아웃이 적용됩니다.

// app/layout.tsx
export default function RootLayout({
  children,
}: {
  children: React.ReactNode
}) {
  return (
    <html lang="en">
      <body>
        <header>헤더</header>
        {children}
        <footer>푸터</footer>
      </body>
    </html>
  )
}

서버 컴포넌트

App Router에서는 모든 컴포넌트가 기본적으로 서버 컴포넌트입니다. 서버 컴포넌트는 서버에서 렌더링되어 클라이언트로 전송되므로, 클라이언트 측 JavaScript 번들 크기를 줄일 수 있습니다.

// 서버 컴포넌트 예시
export default async function Page() {
  const data = await fetchData(); // 서버에서 직접 데이터를 가져올 수 있습니다.
  
  return (
    <div>
      <h1>{data.title}</h1>
      <p>{data.content}</p>
    </div>
  );
}

클라이언트 컴포넌트

클라이언트에서 실행되어야 하는 컴포넌트는 파일 상단에 'use client' 지시어를 추가하여 클라이언트 컴포넌트로 만들 수 있습니다.

'use client'

import { useState } from 'react';

export default function Counter() {
  const [count, setCount] = useState(0);
  
  return (
    <div>
      <p>Count: {count}</p>
      <button onClick={() => setCount(count + 1)}>Increment</button>
    </div>
  );
}

데이터 페칭

App Router에서는 서버 컴포넌트에서 직접 데이터를 가져올 수 있습니다. 이를 통해 클라이언트 측 데이터 페칭의 복잡성을 줄일 수 있습니다.

// 서버 컴포넌트에서 데이터 페칭
export default async function Page() {
  const res = await fetch('https://api.example.com/data');
  const data = await res.json();
  
  return (
    <div>
      <h1>{data.title}</h1>
      <p>{data.content}</p>
    </div>
  );
}

로딩 상태와 에러 처리

App Router에서는 'loading.tsx'와 'error.tsx' 파일을 사용하여 로딩 상태와 에러 처리를 쉽게 구현할 수 있습니다.

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

// app/blog/error.tsx
'use client'

export default function Error({
  error,
  reset,
}: {
  error: Error;
  reset: () => void;
}) {
  return (
    <div>
      <h2>에러가 발생했습니다.</h2>
      <p>{error.message}</p>
      <button onClick={reset}>다시 시도</button>
    </div>
  );
}

결론

Next.js App Router는 React 18의 새로운 기능들을 활용하여 더 효율적인 라우팅 시스템을 제공합니다. 서버 컴포넌트, 레이아웃, 로딩 상태, 에러 처리 등 다양한 기능들을 통해 더 나은 사용자 경험을 제공할 수 있습니다. 이러한 기능들을 적극적으로 활용하여 더 나은 웹 애플리케이션을 만들어 보세요!