Next.js를 사용하면 여러 언어를 지원하도록 라우팅 및 콘텐츠 렌더링을 구성할 수 있으며, 이를 통해 사이트를 다양한 로케일에 맞게 적응시킬 수 있습니다. 이에는 번역된 콘텐츠(로캘라이제이션) 및 국제화된 경로 처리가 포함됩니다.

Terminology

로케일(Locale): 언어 및 형식 지정 선호도를 나타내는 식별자입니다. 이는 일반적으로 사용자의 선호 언어와 가능하다면 그들의 지리적 지역을 포함합니다.

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

Routing Overview

브라우저의 사용자 언어 환경을 사용하여 어떤 로케일을 사용할지 선택하는 것이 권장됩니다. 선호 언어를 변경하면 응용 프로그램에 대한 들어오는 Accept-Language 헤더가 수정됩니다.

예를 들어, 다음과 같은 라이브러리를 사용하여 들어오는 요청을 살펴보고 지원할 로케일, 기본 로케일에 따라 어떤 로케일을 선택할지 결정할 수 있습니다.

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'

[코드] middleware.js

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

let locales = ['en-US', 'nl-NL', 'nl']
 
// Get the preferred locale, similar to the 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
  const pathnameHasLocale = locales.some(
    (locale) => pathname.startsWith(`/${locale}/`) || pathname === `/${locale}`
  )
 
  if (pathnameHasLocale) return
 
  // Redirect if there is no locale
  const locale = getLocale(request)
  request.nextUrl.pathname = `/${locale}${pathname}`
  // e.g. incoming request is /products
  // The new URL is now /en-US/products
  return Response.redirect(request.nextUrl)
}
 
export const config = {
  matcher: [
    // Skip all internal paths (_next)
    '/((?!_next).*)',
    // Optional: only run on root (/) URL
    // '/'
  ],
}

[코드] middleware.js