How do you properly setup i18n with nextjs?

在Next.js中正确设置国际化（i18n）主要涉及几个关键步骤。Next.js自版本10起支持内置的国际化路由功能。我将按步骤解释如何设置：

步骤1：配置 next.config.js

首先，您需要在 next.config.js文件中配置i18n属性。这里您可以定义您的默认语言（locale）、其他支持的语言以及可能的域名映射。

javascript
module.exports = {
  i18n: {
    locales: ['en-US', 'fr', 'es'],
    defaultLocale: 'en-US',
    // 可选，用于设置基于域名的国际化
    domains: [
      {
        domain: 'example.com',
        defaultLocale: 'en-US',
      },
      {
        domain: 'example.fr',
        defaultLocale: 'fr',
      },
      {
        domain: 'example.es',
        defaultLocale: 'es',
      },
    ],
  },
}

步骤2：使用 next-translate或其他库

虽然Next.js提供了路由的国际化，但它不涉及文本的翻译。您可以使用像 next-translate这样的库来管理文本的翻译。首先，安装 next-translate：

bash
npm install next-translate

然后，您需要创建一个 i18n.js配置文件，指定翻译文件的路径和支持的语言：

javascript
module.exports = {
  locales: ['en-US', 'fr', 'es'],
  defaultLocale: 'en-US',
  pages: {
    '*': ['common'],
    '/about': ['about'],
  },
  loadLocaleFrom: (lang, ns) => 
    import(`./locales/${lang}/${ns}.json`).then(m => m.default),
}

步骤3：在页面中使用翻译

在页面组件中，您可以使用 useTranslation钩子来获取翻译函数，并使用它来翻译文本。

javascript
import useTranslation from 'next-translate/useTranslation'

export default function HomePage() {
  const { t, lang } = useTranslation('common')
  
  return <h1>{t('welcome')}</h1>
}

步骤4：部署和测试

部署您的应用程序并确保所有配置正确无误。可以使用不同的域名或路径访问您的网站，检查网站是否正确地显示了不同的语言。

通过以上步骤，您可以在Next.js项目中设置多语言支持，从而提供更为本地化的用户体验。