前端 Next.js 國際化應用

本文档总结了在Next.js中实现国际化的步骤,包括安装库、配置next-i18next.config.js和next.config.js,创建public/locales文件夹,使用serverSideTranslations和useTranslation函数,以及引入appWithTranslation高阶组件。通过这些步骤,可以为Next.js应用添加多语言支持。

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >

前言

國際化對於很多場景來說都是挺常見的,舉凡稍微有點知名度的網站,其實全部都提供了國際化的功能。最近因為需要開始學習使用,本文檔就來總結一下在 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"
评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值