Next.js를 사용하면 여러 언어를 지원하도록 콘텐츠의 라우팅 및 렌더링을 구성할 수 있다. 사이트를 다양한 로케일에 맞게 만드는 것은 번역된 콘텐츠(현지화) 및 국제화된 경로를 포함한다.
- Terminology
로케일이란 언어 및 형식 기본 설정 집합에 대한 식별자이다. 여기에는 일반적으로 사용자가 선호하는 언어와 지역이 포함될 수 있다.
| en-US | 미국에서 사용되는 영어 |
| nl-NL | 네델란드에서 사용되는 네델란드어 |
| nl | 네델란드어, 특정 지역 없음 |
- Routing Overview
브라우저에서 사용자의 언어 기본 설정을 사용하여 사용할 로케일을 선택하는 것이 좋다. 기본 언어를 변경하면 애플리케이션에 대한 수신 Accept-Language 헤더가 수정된다.
예를 들어 다음 라이브러리를 사용하면 들어오는 요청을 보고 헤더, 지원하려는 로케일 및 기본 로케일을 기반으로 선택할 로케일을 결정할 수 있다.
// middleware.js
import { match } from '@formatjs/int-localematcher';
import Negotiator from 'netoiator';
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)으로 국제화할 수 있다. 이 정보를 사용하여 이제 미들웨어 내부의 로케일을 기반으로 사용자를 리디렉션 할 수 있다.
// middleware.js
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 = ocales.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.redurect(
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"
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);
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>
)
}'Next.js' 카테고리의 다른 글
| Next.js 9-4 Script Optimization (0) | 2023.06.09 |
|---|---|
| Next.js 9-3 Font Optimization (0) | 2023.06.08 |
| Next.js 11-12 Routing Project Organization File Colocation (0) | 2023.06.02 |
| Next.js 11-11 Routing middleware (0) | 2023.06.01 |
| Next.js 11-10 Routing Route Handlers (0) | 2023.05.31 |
