언어 기반 라우팅

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

문제

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

해결 방법

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

단계

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] 폴더 내에 생성됩니다. 예를 들어 'about' 페이지를 만들려면 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 매개변수를 모든 페이지에서 사용할 수 있습니다.