next-i18next 新版更動、如何引入及簡單介紹

起心動念

最近公司導入 i18n 的架構，以往用過的 v7.0.0 版本已經跟現在截然不同了，想在這邊做個紀錄

關於 next-i18next

在國際化翻譯文案的框架中，大家而熟能詳的 react-i18next 是能整合進入 react 專案中，但針對 next.js 框架中提供的 SSR 和 SSG 的功能中，是比較難以整合進入的，也正因為如此，在 react-i18next 的架構下，next-i18next 推出，為了更好整合進入 next.js 中

v 8.0.0 有什麼主要更動呢？

最大的更動從第八版開始，主要有：

每個頁面必須使用 serverSideTranslations 這個方法在 next page 層中的 getServerSideProps 或是 getStaticProps 中將 locale 設定跟 namespaces 先行引入，要留意不能用在 getInitialProps 這個方法中，因為 serverSideTranslations 只能執行在 server side

import { serverSideTranslations } from 'next-i18next/serverSideTranslations';

export async function getStaticProps({ locale }) {
  return {
    props: {
      ...(await serverSideTranslations(locale, ['common', 'footer'])),
      // Will be passed to the page component as props
    },
  };
}

這個改動應該是起因於 next.js 從 v 10.0.0 開始有支援 Internationalized Routing，簡單說就是要改變語系就是改變 next 的 route 即可，像是英文版本就是 https://example/en.com 後面會多個語系的路徑

改語言的方式

以前：

import { i18n } from "@/lib/i18n"; // 啟動好的 i18n instance

i18n.changeLanguage("en");

現在：

import { useRouter } from "next/router";

// 在 component 裡面
const router = useRouter();
router.push(router.asPath, undefined, { locale: "en" });

像第一點說的，next 開始支援 Internationalized Routing 後，改語言就會像是改路徑

next.config.js 要加入 i18n 的設定檔

i18n: {
    defaultLocale: 'en',
    locales: ['en', 'de'],
  },
  // 跟以前一樣，也可以加入自定義 locale file 的路徑
  localePath: path.resolve('./my/custom/path'),

所有 import from 的從原本 i18n 變成 next-i18next

import { withTranslation } from 'next-i18next'
import { useTranslation } from 'next-i18next'

不用再放 namespacesRequired: ['common'] 在 _app.js

心得

其實當初對於這些改動真的不太習慣，想要一度換回 7 版，但畢竟 7 版是沒有支援 SSR 的啊啊啊！也只能慢慢習慣囉

tags:i18n

date:2022/2/20

Yu Ken Code

Yu Ken Code