标签: next-i18next

我已经实现了两个不同的第三方包来实现静态站点生成（SSG）页面的本地化，其中包括 next-i18next 和 next-translate。它们对于服务器渲染和客户端渲染的页面都工作得很好。我试图让它们适用于静态网站生成的页面，但到目前为止还无法做到这一点。我也实施了手动解决方案，但到目前为止还没有成功。我有一些疑问：

1. 接下来我们可以实现静态站点生成页面的本地化吗？
2. 如果是，您能否提供某种示例来实现 SSG 页面的本地化。

测试库...总是很有趣。我next-i18next在我的 NextJS 项目中使用。我们正在使用useTranslation带有命名空间的钩子。

当我运行我的测试有一个警告：

console.warn react-i18next:: 您需要使用 initReactI18next 传入一个 i18next 实例

> 33 |   const { t } = useTranslation(['common', 'account']);
     |                 ^

我已经尝试了react-i18next 测试示例中的设置，但没有成功。我也试过这个建议。

以及只是试图嘲笑useTranslation但没有成功。

是否有更直接的解决方案来避免此警告？测试通过 FWIW...

test('feature displays error', async () => {
    const { findByTestId, findByRole } = render(
      <I18nextProvider i18n={i18n}>
        <InviteCollectEmails onSubmit={jest.fn()} />
      </I18nextProvider>,
      {
        query: {
          orgId: 666,
        },
      }
    );

    const submitBtn = await findByRole('button', {
      name: 'account:organization.invite.copyLink',
    });

    fireEvent.click(submitBtn);

    await findByTestId('loader');

    const alert …

我正在使用next-i18next模块来提供多语言支持。

我还有一些静态页面和动态页面。两者在本地都工作正常。

我在 vercel 上部署了所有静态页面，在 vercel 上都运行良好。但动态页面在 vercel 上不起作用。它显示该动态页面的 404 页面。

下面是动态页面的代码。（页面/测试页面/[questionId].js）

import { useState, useEffect } from "react";
import {Layout} from "@components/common";
import { useRouter } from 'next/router';
import { useTranslation } from 'next-i18next'
import { serverSideTranslations } from 'next-i18next/serverSideTranslations'
import { TestComponent } from '@components/TestComponent'

const TestPage = () => 
{
    const { t } = useTranslation('common')
    const router = useRouter()
    const {questionId} = router.query;
    const [isApiLoaded,setIsApiLoaded] = useState(false)
    
    return (
        <TestComponent 
            t={t}
            isApiLoaded={isApiLoaded}
            setIsApiLoaded={setIsApiLoaded}
        /> …

我正在努力解决NextJS Typescript 项目中的next-i18next集成 - 几乎没有任何最近的示例。我已经配置了国际化路由，但只要getServerSideProps语法困扰我，我就无法正确设置 i18next 。

我对 Typescript 不太了解，也不熟悉类型声明。

代码如下所示，大部分是从 next-i18next 文档复制的：

### index.tsx

// rest of index.tsx...

export const getServerSideProps: GetServerSideProps = async ({locale}) => ({
  props: {
    ...await serverSideTranslations(locale, ['common', 'header']),
  },
})

export default Home

我的 IDE 中抛出有关“区域设置”的错误。尽管我正在使用 getServerSideProps，但我什至不确定它是否是大多数静态项目的最佳解决方案，但如果我最终计划使用 SSR，我似乎无法避免它。提供正确翻译的内容 + 具有匹配的 URL 区域设置的简单方法会很棒。

我在 NextJS 中有一个带有 next-i18next 的网站，除了页面之外的每个页面都必须翻译legal。

这些legal页面是 Markdown 格式的，并且由于[legal].js页面及其中的getStaticPaths和 ，我启用了动态路由。getStaticProps

问题是，通过构建我的网站，我的法律页面会以该语言为前缀（此处en）。我想删除它，因为我不想翻译这些页面。

我在这里做错了什么？

多谢

文件夹结构：

pages
|- index.js
|- [legal].js
|- privacy-policy.mdx

下一个-i18next.config.js

pages
|- index.js
|- [legal].js
|- privacy-policy.mdx

[法律].js

module.exports = {
  i18n: {
    defaultLocale: 'en',
    locales: ['en'],
    fallbackLng: 'en',
    defaultNS: ['homepage', 'header', 'footer'],
    localeDetection: false,
  },
}

构建输出：

我试图通过单击按钮来更改项目中的默认区域设置。我不想通过推送子路径（例如fooo.com/fa.

这是我的next-i18next配置：

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

这是我更改区域设置并使用它的简单代码：

const { t, i18n } = useTranslation('common');
   ///
<button onClick={() => i18n.changeLanguage('fa')}>
    Click to Change Language
</button>
<p>{t('title')}</p>

但它不起作用并卡在默认区域设置 EN 中。

我正在使用 next-i18next 来处理 next.js 应用程序的国际化。

是否可以动态更改默认语言？例如基于顶级域名？

const defaultLanguage = topLevelDomain === "de" : "de" ? "it";

编辑：我也在使用 localeSubpaths 所以这就是我试图调查这个主题的原因。

我迁移到 next.js 并开始使用 next-i18next。我想知道，如何使 next-i18next 从公共文件夹加载语言环境？仅当我将 locales 文件夹放在根目录中而不是公开时，它才有效。

i18n.json ;

{
    "locales": ["en", "fr", "ar"],
    "defaultLocale": "en",
    "pages": {
      "*": ["common"]
    }
}

next.config.js ;

// next.config.js
const nextTranslate = require("next-translate");

module.exports = {
  ...nextTranslate(),
};