[ Routing ] Internationalization

차차·2023년 5월 17일
0

Next Docs

목록 보기
14/34
post-thumbnail

Next.js를 사용하면 다국어를 지원하기 위해 콘텐츠의 라우팅과 렌더링을 구성할 수 있다. 다른 로케일에 대응하는 사이트는 번역된 콘텐츠(로컬라이제이션)와 국제화된 라우트를 포함한다.


용어

로캘(Locale): 언어와 서식 설정에 대한 식별자입니다. 일반적으로 사용자의 기본 언어와 지역 정보를 포함한다.

  • en-US : 미국에서 사용되는 영어
  • nl-NL : 네덜란드에서 사용되는 네덜란드어
  • nl : 네덜란드어, 특정 지역 없음

라우팅 개요

브라우저에서 사용자의 언어 설정을 사용하여 어떤 로캘을 선택할지 결정하는 것이 좋다. 선호하는 언어를 변경하면 애플리케이션으로 들어오는 Accept-Language 헤더가 수정된다.


예를 들어, 다음과 같은 라이브러리를 사용하여 수신된 요청을 분석하여 어떤 로케일을 선택할지 결정할 수 있다. 이는 Headers, 지원할 Locale, 그리고 기본 Locale이 기반이다.

// middleware.js

import { match } from '@formatjs/intl-localematcher';
import Negotiator from 'negotiator';
 
let headers = { 'Accept-Language': 'en-US,en;q=0.5' };
let languages = new Negotiator(headers).languages();
let locales = ['en-US', 'nl-NL', 'nl'];
let defaultLocale = 'en-US';
 
match(languages, locales, defaultLocale); // -> 'en-US'

라우팅은 서브 경로 (/fr/products) 또는 도메인 (my-site.fr/products)으로 국제화될 수 있다. 이 정보를 사용하여 미들웨어 내에서 로캘에 따라 사용자를 리디렉션할 수 있다.

import { NextResponse } from 'next/server'
 
let locales = ['en-US', 'nl-NL', 'nl']
 
// Get the preferred locale, similar to above or using a library
function getLocale(request) { ... }
 
export function middleware(request) {
  // Check if there is any supported locale in the pathname
  const pathname = request.nextUrl.pathname
  const pathnameIsMissingLocale = locales.every(
    (locale) => !pathname.startsWith(`/${locale}/`) && pathname !== `/${locale}`
  )
 
  // Redirect if there is no locale
  if (pathnameIsMissingLocale) {
    const locale = getLocale(request)
 
    // e.g. incoming request is /products
    // The new URL is now /en-US/products
    return NextResponse.redirect(
      new URL(`/${locale}/${pathname}`, request.url)
    )
  }
}
 
export const config = {
  matcher: [
    // Skip all internal paths (_next)
    '/((?!_next).*)',
    // Optional: only run on root (/) URL
    // '/'
  ],
}

마지막으로, app/ 폴더 내의 모든 특수 파일은 app/[lang] 폴더 안에 중첩되도록 해야 한다. 이렇게 하면 Next.js 라우터가 라우트의 다른 로캘을 동적으로 처리하고, lang 매개변수를 모든 레이아웃과 페이지로 전달할 수 있다.

// app/[lang]/page.js

// You now have access to the current locale
// e.g. /en-US/products -> `lang` is "en-US"
export default async function Page({ params: { lang } }) {
  return ...
}

루트 레이아웃도 새로운 폴더에 중첩될 수 있다. (예: app/[lang]/layout.js)


Localization

사용자의 기본 로캘에 따라 표시되는 콘텐츠를 변경하는 것, 즉 로캘화는 Next.js에만 해당되는 것은 아니다. 아래에 설명된 패턴은 모든 웹 애플리케이션에서 동일하게 작동한다.


예를 들어, 영어와 네덜란드어 콘텐츠를 애플리케이션 내에서 지원하고자 한다고 가정해보자. 우리는 두 개의 다른 "사전"을 유지할 수 있다. 이 사전은 어떤 키를 로캘화된 문자열로 매핑해주는 객체다.

// dictionaries/en.json

{
  "products": {
    "cart": "Add to Cart"
  }
}
// dictionaries/nl.json

{
  "products": {
    "cart": "Toevoegen aan Winkelwagen"
  }
}

그런 다음 요청된 로캘에 대한 번역을 로드하는 getDictionary 함수를 만들 수 있다.

// app/[lang]/dictionaries.js

import 'server-only';
 
const dictionaries = {
  en: () => import('./dictionaries/en.json').then((module) => module.default),
  nl: () => import('./dictionaries/nl.json').then((module) => module.default),
};
 
export const getDictionary = async (locale) => dictionaries[locale]();

현재 선택된 언어에 따라 레이아웃이나 페이지 내에서 사전을 가져올 수 있다.

// app/[lang]/page.js

import { getDictionary } from './dictionaries';
 
export default async function Page({ params: { lang } }) {
  const dict = await getDictionary(lang); // en
  return <button>{dict.products.cart}</button>; // Add to Cart
}

app/ 디렉토리의 모든 레이아웃과 페이지가 서버 컴포넌트로 기본 설정되어 있으므로, 번역 파일의 크기가 클라이언트 측 JavaScript 번들 크기에 영향을 미치는 것에 대해 걱정할 필요가 없다. 이 코드는 서버에서만 실행되며, 결과로 생성된 HTML만 브라우저로 전송된다.


Static Generation

특정 로캘 세트에 대한 정적 라우트를 생성하기 위해, 페이지나 레이아웃에 generateStaticParams를 사용할 수 있다. 이는 전역적으로 사용될 수 있으며, 예를 들어 루트 레이아웃에서 다음과 같이 사용할 수 있다.

// app/[lang]/layout.js

export async function generateStaticParams() {
  return [{ lang: 'en-US' }, { lang: 'de' }];
}
 
export default function Root({ children, params }) {
  return (
    <html lang={params.lang}>
      <body>{children}</body>
    </html>
  );
}

[출처]
https://nextjs.org/docs/app/building-your-application/routing/internationalization

profile
나는야 프린이

0개의 댓글