Next.js 13 이상 localization 적용하기

 

localization 이란?

국제화( i18n)을 통해 감지한 언어로 번역 및 언어를 교체 해줍니다.

 

적용하기

1. app/[lang]/dictionaries.js 만들어 번역하는 모듈을 적용시켜 줍니다.

import 'server-only'

const dictionaries = {
  en: () => import('../../public/dictionaries/en.json').then((module) => module.default),
  ko: () => import('../../public/dictionaries/ko.json').then((module) => module.default),
}

export const getDictionary = async (locale) => await dictionaries[locale]()

 

 

2. 정적으로 렌더링 해주기위해 public하위에 dictionaries폴더 구성 후 ko.json/en.json 등 각자 필요한 언어에 맞는 json파일을 생성해 줍니다.

{
  "title": "아기소닷컴",
  "more": "+ 더보기",
  "home": {
    "video": "영상",
    "notice": "공고",
    "news": "뉴스"
  },
  "video":{
    "links":"관련 비디오 링크"
  }
  
}

 

3. app의 최상단 page.js에 적용시켜줍니다.

import Heading from "@/component/Heading";
import VideoPlayer from "@/component/VideoPlayer";
import Post from "@/component/Post";
// dictionaries로 부터 getDictionary가지고 오기
import { getDictionary } from "./dictionaries";


// async함수로 변환 후 await으로 dict값 가지고오기
export default async function Home({ params: { lang } }) {
  const dict = await getDictionary(lang);

// json파일의 경로대로 입력해주기
  return (
    <main className="flex flex-col gap-y-20 max-w-[1024px] mx-auto">
      <Heading content={dict.home.video} link={`/video`} >
        <VideoPlayer />
      </Heading>
      <Heading content={dict.home.notice} link={`/notice`} >
        <Post />
        <Post />
      </Heading>
      <Heading content={dict.home.news} link={`/news`} >
        <Post />
        <Post />
        <Post />
      </Heading>
    </main>
  );
}

 

 

 

참고: https://nextjs.org/docs/app/building-your-application/routing/internationalization#localization

Routing: Internationalization | Next.js