close

实施国际化(i18n) Next.js ：多语言

在本节中，我们将指导您完成在应用程序中实施国际化(i18n) 的过程 Next.js。 借助 i18n，您可以为用户创建多语言体验并提供特定于语言的内容。

使用 next-i18next 图书馆

next-i18next 是一个在应用程序中实现 i18n 的流行库 Next.js。 以下是将 i18n 添加到您的应用程序中的方法：

安装 next-i18next： 

npm install next-i18next

在您的文件中配置库 next.config.js： 

const { i18n } = require('./next-i18next.config');  
  
module.exports = {  
  i18n,  
};

创建一个名为的配置文件 next-i18next.config.js： 

module.exports = {  
  i18n: {  
    locales: ['en', 'fr', 'es'],  
    defaultLocale: 'en',  
  },  
};

在您的应用程序中使用该库： 

import { useTranslation } from 'next-i18next';  
  
function MyComponent() {  
  const { t } = useTranslation();  
  
  return( 
    <div>  
      <p>{t('welcome')}</p>  
    </div>  
 );  
}

创建多语言内容

安装后 next-i18next，您可以创建语言文件，例如 en.json、 fr.json、 es.json 来提供每种语言的内容： 

// en.json  
{  
  "welcome": "Welcome!"  
}  
  
// fr.json  
{  
  "welcome": "Bienvenue!"  
}  
  
// es.json  
{  
  "welcome": "¡Bienvenido!"  
}

语言切换

要允许语言切换，您可以创建一个语言切换工具并使用该 i18n.changeLanguage 功能：

 

import { useTranslation } from 'next-i18next';  
  
function LanguageSwitcher() {  
  const { i18n } = useTranslation();  
  
  const handleChangeLanguage =(newLanguage) => {  
    i18n.changeLanguage(newLanguage);  
  };  
  
  return( 
    <div>  
      <button onClick={() => handleChangeLanguage('en')}>English</button>  
      <button onClick={() => handleChangeLanguage('fr')}>Français</button>  
      <button onClick={() => handleChangeLanguage('es')}>Español</button>  
    </div>  
 );  
}

结论

Next.js 本节向您介绍了使用该库 在应用程序中实现国际化(i18n) 的过程 next-i18next。 通过提供特定于语言的内容并允许用户切换语言，您可以为用户创建引人入胜的多语言体验。