i18n 支持与下一次导出不兼容。(SSR - NextJS 10)

Question

i18n 支持与下一次导出不兼容。

NextJS 不使用 i18n 运行部署

我使用 nextJS 10，我选择 nextJS 10 的主要原因是我可以做 SSR 并使用 i18n。 国际化路由是一个新的下一个 js 10 功能，并且只有一个页面到该功能。

但是当我要进行部署时，会出现此错误：i18n 支持与下一次导出不兼容。 在国际化路由页面中没有任何相关内容。

我的代码

下一个.config.js

const withImages = require('next-images')
const path = require('path')

module.exports = withImages({
    esModule: false,
    i18n: {
        locales: ['en-US', 'pt-BR', 'pt-PT', 'es-ES'],
        defaultLocale: 'pt-BR',
      },
});

我创建了一个翻译存档，使下一个路由器 obs 成为条件：PT 和 EN 是带有文本的 JSON 文件

import * as pt from "./pt";
import * as en from './en';
import { useRouter } from "next/router"

export const traducao = () =>{
  let routes = useRouter();

  let translate;
 
    if (routes.locale == 'pt-PT' || routes.locale == 'pt-BR') {
      translate = pt.default;
    } else {
      translate = en.default;
    }
  
  return translate 
}

而我只是在我的项目中像一个函数一样使用：

{traducao().homeText.button_text}

运行良好，识别浏览器语言并切换。我正在使用部署脚本

npm run deploy
"deploy": "npm run clean && npm run build && next export -o dist/"

重现步骤

1. 转到“next.config,js”
2. 创建 i18n 导出
3. 创建识别浏览器语言的翻译文件
4. 使用您的站点文本导入 JSON 文件
5. 在你想要的地方使用
6. 尝试部署

预期行为

它只是假设工作正常并且部署正常。

截图

系统信息

• 操作系统：Linux Ubuntu
• IDE：VSCode
• Next.js 版本：10
• Node.js 版本：v15.3.0
• 部署：下一次部署

Answer 1

通过深入研究 vercel 的 github 上的问题，我发现了这个替代方案，它不使用 next-i18next 或任何其他 nextjs 魔法：

https://github.com/Xairoo/nextjs-i18n-static-page-starter

它只是使用 i18next 的基本 i18n，将所有语言环境与 JS 捆绑在一起，因此存在明显的权衡，但至少它可以与 SSG 一起使用。你可以在此基础上提出更复杂的东西。这就是我要做的。

Answer 2

还有一种替代方案，即不完全使用 next.js 的 i18n 功能并自行创建 i18n 语言检测。本博客文章中描述了使用下一个语言检测器模块的示例，可能如下所示：

// languageDetector.js
import languageDetector from 'next-language-detector'
import i18nextConfig from '../next-i18next.config'

export default languageDetector({
  supportedLngs: i18nextConfig.i18n.locales,
  fallbackLng: i18nextConfig.i18n.defaultLocale
})

// redirect.js
import { useEffect } from 'react'
import { useRouter } from 'next/router'
import languageDetector from './languageDetector'

export const useRedirect = (to) => {
  const router = useRouter()
  to = to || router.asPath

  // language detection
  useEffect(() => {
    const detectedLng = languageDetector.detect()
    if (to.startsWith('/' + detectedLng) && router.route === '/404') { // prevent endless loop
      router.replace('/' + detectedLng + router.route)
      return
    }

    languageDetector.cache(detectedLng)
    router.replace('/' + detectedLng + to)
  })

  return <></>
};

export const Redirect = () => {
  useRedirect()
  return <></>
}

// eslint-disable-next-line react/display-name
export const getRedirect = (to) => () => {
  useRedirect(to)
  return <></>
}

完整的指南和示例代码可以在这里找到：

• 指导
• 例子

Answer 3

您不能export与 next.js i18n 实现一起使用。

请注意，国际化路由不与下一个导出集成，因为下一个导出不利用 Next.js 路由层。完全支持不使用 next 导出的混合 Next.js 应用程序。

Next.js 文档