reactjs - 404 用于包含语言环境的所有路由 - NextJS 和 next-i18next

Question

嗨，我正在关注这里的文档：github docs

，但所有具有语言环境的 URL 都返回 404。例如：

• 本地主机：3000/de/second-page = 404
• 本地主机：3000/en/second-page = 404
• 本地主机：3000/de = 404

• 本地主机：3000/en = 404

  • 默认区域设置相同。

• 本地主机：3000/秒页 = 200

• 本地主机：3000 = 200

我想，这是因为没有pages/de/second-page.js, 例如，但是这个库的目的是什么，如果它不能解决这个问题。

我搜索了很多，我知道localSubpaths，但似乎它不起作用：

module.exports = new NextI18Next({
otherLanguages: ['fr'],
//localeSubpaths: localeSubpathVariations[localeSubpaths],
localeSubpaths: {
    de: 'de',
    en: 'en',
  }
})

它在我的应用程序中不起作用，但在他们的示例中也不起作用：他们的示例

标签： reactjslocalizationnext.jsi18nextnext-i18next

Answer 1

你检查过这两个步骤吗？

创建并导出 NextI18Next 实例后，您需要执行以下步骤以使事情正常进行：

在您的 pages 目录中创建一个 _app.js 文件，并使用 NextI18Next.appWithTranslation 高阶组件 (HOC) 包装它。您可以在示例/simple/pages/_app.js 中看到这种方法。如果它是一个类组件，您的应用组件必须扩展 App，或者如果它是一个功能组件，则必须定义一个 getInitialProps（在此处进行说明）。

如果要使用语言环境子路径，请在根目录中创建 next.config.js 文件。您可以在示例/simple/next.config.js 中看到这种方法（需要 Next.js 9.5+）。

const { nextI18NextRewrites } = require('next-i18next/rewrites')

const localeSubpaths = {
  de: 'de',
  en: 'en',
};

module.exports = {
  rewrites: async () => nextI18NextRewrites(localeSubpaths),
  publicRuntimeConfig: {
    localeSubpaths,
  },
}