Next.js Beta Docs 번역

[Routing] Internationalization Next.js Beta Docs

2023. 5. 10. 15:37
목차
  1. Internationalization
  2. Terminology
  3. Routing Overview
  4. Localization
  5. Static Generation
  6.  

https://nextjs.org/docs/app/building-your-application/routing/internationalization
위 문서에 대한 번역을 진행합니다.

번역시점은 05-09로 공식문서의 추가적인 업데이트가 있을 수 있습니다.
번역기와 챗지피티에 의존해서 번역하고있습니다.
번역체를 자연스러운 어투로 옮기는 과정에서 오역이 발생할 수 있는 점 미리 알립니다.
한글로 번역하는 것이 더 어색한 단어의 경우 원문을 먼저 표기하겠습니다.
 
역자의 개인적인 의견에 대한 내용은

이 안에서 이루어집니다.

Internationalization

Next.js를 사용하면 여러 언어를 지원하도록 콘텐츠 라우팅 및 렌더링을 구성할 수 있습니다.

사이트를 다양한 locales에 맞게 조정하려면 번역된 콘텐츠(localization)과 internationalized routes가 필요합니다.


Terminology

locale : 언어 및 서식 기본 설정 집합에 대한 식별자 입니다.

여기에는 일반적으로 사용자가 선호하는 언어와 해당 지역이 포함됩니다.

en-US : 미국에서 사용되는 영어

nl-NL : 네덜란드에서 사용되는 네덜란드 어

nl : 네덜란드어, 특정 지역 없음


Routing Overview

브라우저에서 사용자의 언어 기본 설정을 사용하여 사용할 locale을 선택하는 것이 좋습니다.

기본 설정 언어를 변경하면 애플리케이션으로 수신되는 Accept-Language 헤더가 수정되게 됩니다.

예컨대 다음 라이브러리를 사용하면 수신 요청을 살펴보고 헤더, 지원하려는 locale 및 default locale에 따라 선택할 locale을 결정할 수 있습니다.

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) 를 통해 internationalized(국제화)할 수 있습니다.

이제 이 정보를 이용하여 미들웨어 내부의 locale을 따라 사용자를 리디렉션할 수 있습니다.

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 = 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/ 디렉토리 내의 모든 special files 들은 app/[lang] 아래에 중첩되도록 해야 합니다.

이렇게 하면 Next.js 라우터가 경로에서 다양한 locale 들을 동적으로 처리하고 모든 레이아웃과 페이지에 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 ...
}

루트 레이아웃은 새 폴더(ex : app/[lang]/layout.js)에 중첩할 수도 있습니다.


Localization

현지화

 

사용자가 선호하는 locale에 따라 표시되는 콘텐츠를 변경하는 것을 말합니다.

즉 localization은 Next.js에만 국한된 개념이 아닙니다.

아래에 설명된 패턴들은 모든 웹 애플리케이션에서 동일하게 작동합니다.

 

애플리케이션 내에서 영어와 네덜란드어 콘텐츠를 모두 지원하고자 한다고 가정해보겠습니다.

일부 키에서 현지화된 문자열로의 매핑을 제공하는 객체인 두개의 서로 다른 "dictionareies"를 유지할 수 있습니다.

예컨대

dictionaries/en.json
{
  "products": {
    "cart": "Add to Cart"
  }
}
dictionaries/nl.json
{
  "products": {
    "cart": "Toevoegen aan Winkelwagen"
  }
}

그런 다음 우리는 요청된 locale에 대한 번역을 로드하는 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]();

현재 선택된 언어가 주어지면 레이아웃이나 페이지 내에서 dictionary를 가져올 수 있습니다.

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

특정한 locale의 집합에 대한 정적 경로를 생성하기 위해 페이지 또는 레이아웃에 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 Beta Docs 번역' 카테고리의 다른 글

[Routing] Middleware Next.js Beta Docs  (0) 2023.05.09
[Routing] Intercepting Routes Next.js Beta Docs  (0) 2023.05.08
[Routing] Parallel Routes Next.js Beta Docs  (0) 2023.05.08
[Data Fetching] (7) Route Handlers Next.js Beta Docs  (0) 2023.05.07
[Data Fetching] Route Groups Next.js Beta Docs  (0) 2023.05.07
  1. Internationalization
  2. Terminology
  3. Routing Overview
  4. Localization
  5. Static Generation
  6.  
'Next.js Beta Docs 번역' 카테고리의 다른 글
  • [Routing] Middleware Next.js Beta Docs
  • [Routing] Intercepting Routes Next.js Beta Docs
  • [Routing] Parallel Routes Next.js Beta Docs
  • [Data Fetching] (7) Route Handlers Next.js Beta Docs
냠냠맨
냠냠맨
프론트엔드 개발 전반을 다루는 기술 블로그입니다.
냠냠맨
React와 TypeScript를 좋아하는 개발자
냠냠맨
전체
오늘
어제
  • all category (434)
    • CMC (0)
    • best (11)
    • 년간회고 (1)
    • cheetsheet (15)
    • 프로젝트 회고 (3)
    • 서평 (3)
    • SEO Study (1)
    • 프로젝트 진행기 (10)
    • testcode (9)
    • yarnberry (7)
    • css (21)
    • typescript (15)
    • redux (7)
    • react (43)
    • Next.js (9)
    • Nestjs (3)
    • javascript (44)
    • programmers (67)
    • leetcode (41)
    • frontend (41)
    • backjoon (1)
    • Next.js Beta Docs 번역 (12)
    • TIL (15)
      • html (3)
    • Network (12)
      • 간단 정리 시리즈 (2)
      • 질답 준비 (0)
    • 자료구조와 알고리즘 (2)
    • CS (4)
      • OS (1)
    • 취업준비 (2)
    • zoom websocket (2)
    • talk (6)
    • 면접대비 (1)
    • 코드스테이츠 프론트 (5)
    • 간헐적 회고 (18)

블로그 메뉴

  • leetcode
  • programmers
  • javascript
  • html
  • css

공지사항

인기 글

태그

  • 테오의스프린트
  • LeetCode
  • 말풍선
  • border말풍선
  • 주니어개발자
  • 프론트엔드
  • JavaScript
  • frontend
  • 개발
  • CSS
  • teosprint
  • 개발자
  • 테오의스프린트17기
  • 코드스테이츠 #프론트엔드

최근 댓글

최근 글

hELLO · Designed By 정상우.
냠냠맨
[Routing] Internationalization Next.js Beta Docs
상단으로

티스토리툴바

개인정보

  • 티스토리 홈
  • 포럼
  • 로그인

단축키

내 블로그

내 블로그 - 관리자 홈 전환
Q
Q
새 글 쓰기
W
W

블로그 게시글

글 수정 (권한 있는 경우)
E
E
댓글 영역으로 이동
C
C

모든 영역

이 페이지의 URL 복사
S
S
맨 위로 이동
T
T
티스토리 홈 이동
H
H
단축키 안내
Shift + /
⇧ + /

* 단축키는 한글/영문 대소문자로 이용 가능하며, 티스토리 기본 도메인에서만 동작합니다.