前端 Next.js 國際化應用
前言
國際化對於很多場景來說都是挺常見的,舉凡稍微有點知名度的網站,其實全部都提供了國際化的功能。最近因為需要開始學習使用,本文檔就來總結一下在 Next.js 中實現國際化的過程以及涉及到的技術棧。
正文
準備工作
Next.js 中實踐國際化,首先安裝一個庫:
npm install next-i18next
// or
yarn add next-i18next
下面簡單實現,詞條中英文的轉換。
next-i18next.config.js
使用 next-i18next 我們要先在根目錄下新建 next-i18next.config.js
配置文件,以我的項目中配置如下:
module.exports = {
i18n: {
defaultLocale: "ch",
locales: ["ch", "en"],
localeDetection: false,
},
};
-
defaultLocale
是你希望默認的語言包 -
locales
是所有要使用到的語言包 -
localeDetection
注意一定要加上。這個配置參數表示使瀏覽器不要檢測瀏覽器默認的語言。如果不加上該參數,國際化仍然會生效,但是defaultLocale
則不會生效,因為瀏覽器會自動檢測到英文作為默認語言,進而產生一些其他的問題。
注意這個配置文件所配置的語言包名稱要與下面實際的包名稱相同,可以參考大部分對於語言命名的規範。
next.config.js
再來我們還要修改一個配置文件。項目創建之初就會有一個 next.config.js
,關於國際化的配置如下,當然視自己需求自行修改:
const {
i18n } = require("./next-i18next.config");
module.exports = {
i18n,
};
public/locales
我們新建一個 locales
文件夾於 /public
目錄下,把需要進行轉換的語言包分成兩個文件夾,例如 en
( 英), ch
(中),並且在各自語言目錄下,以 json 文件形式編寫各語言的詞條。
- 文件目錄
舉例來說,同樣的詞條的中英文如下:
// /public/locales/ch/common.js
{
"Welcome": "欢迎回来",
"ViewBlog"