언어 기반 라우팅

Next.js(App Router)에서 언어 기반 라우팅 설정하기

문제

'/about'과 같은 단일 URL은 애플리케이션이 여러 언어를 지원할 때 본질적으로 모호합니다. 이 URL을 방문하는 사용자는 기본 언어로 된 콘텐츠를 받지만, 다른 언어로 된 해당 페이지 버전에 링크하거나 북마크할 방법이 없습니다. 이러한 모호성은 검색 엔진을 혼란스럽게 하여 모든 언어 버전을 색인화하지 못하거나 혼합할 수 있습니다.

해결책

'/en/about' 또는 '/fr/about'과 같이 URL 경로에 언어 식별자를 직접 포함시킵니다. 이렇게 하면 모든 경로가 특정 언어에 고유하게 되어 사용자와 검색 엔진 모두에게 모호성이 해결됩니다.

단계

1. 동적 언어 세그먼트 생성

Next.js App Router에서는 app 디렉토리의 루트에 동적 세그먼트 폴더를 생성하여 언어 라우팅을 처리합니다. app 내부에 [lang]이라는 새 폴더를 만들고 기본 page.tsx 파일을 그 안으로 이동합니다.

// app/[lang]/page.tsx

export default function Home({ params }: { params: { lang: string } }) {
  return (
    <div>
      <h1>Home page</h1>
      <p>Current language: {params.lang}</p>
    </div>
  );
}

이 [lang] 폴더는 URL의 첫 번째 부분(예: 'en' 또는 'fr')을 캡처하고 이를 params 객체 내의 lang 속성으로 페이지 컴포넌트에 전달합니다. 이제 /en 또는 /fr과 같은 URL로 페이지에 접근할 수 있습니다.

2. 루트 레이아웃 업데이트

루트 layout.tsx도 app/[lang] 폴더 안으로 이동해야 합니다. 이 레이아웃도 lang 매개변수를 받게 되며, 접근성과 SEO를 위해 <html> 태그에 lang 속성을 설정하는 데 사용해야 합니다.

// app/[lang]/layout.tsx

export default function RootLayout({
  children,
  params,
}: {
  children: React.ReactNode;
  params: { lang: string };
}) {
  return (
    <html lang={params.lang}>
      <body>{children}</body>
    </html>
  );
}

이 레이아웃은 이제 특정 언어 내의 모든 페이지를 감싸게 됩니다. 여기서 lang 속성을 설정하면 브라우저에 페이지 콘텐츠가 어떤 언어로 되어 있는지 알려줍니다.

3. 지원 언어 정의하기

Next.js에 어떤 언어 세그먼트가 유효한지 알려주기 위해, 루트 레이아웃에서 generateStaticParams 함수를 내보낼 수 있습니다. 이를 통해 Next.js는 빌드 시 이러한 경로를 정적으로 생성할 수 있습니다.

// app/[lang]/layout.tsx

export async function generateStaticParams() {
  return [{ lang: 'en' }, { lang: 'es' }, { lang: 'fr' }];
}

export default function RootLayout({
  children,
  params,
}: {
  children: React.ReactNode;
  params: { lang: string };
}) {
  return (
    <html lang={params.lang}>
      <body>{children}</body>
    </html>
  );
}

이 함수는 Next.js에게 앱이 /en, /es, /fr을 지원한다고 알려줍니다. 다른 경로(예: /de)에 대한 요청은 404 Not Found 페이지로 결과가 나타납니다.

4. 중첩 경로 추가하기

앱의 다른 모든 페이지는 이제 [lang] 폴더 내에 생성됩니다. 예를 들어, '소개' 페이지를 만들려면 app/[lang]/about/page.tsx를 추가하면 됩니다.

// app/[lang]/about/page.tsx

export default function AboutPage({ params }: { params: { lang: string } }) {
  return (
    <div>
      <h1>About page</h1>
      <p>Current language: {params.lang}</p>
    </div>
  );
}

이 파일은 자동으로 /en/about, /es/about, /fr/about에서 접근 가능한 경로를 생성합니다. 올바른 번역 콘텐츠를 가져오기 위해 필요한 경우 모든 페이지에서 lang 매개변수를 사용할 수 있습니다.