如何从 api 端点正确加载 next-i18next 中的 i18n 资源？答案

【问题标题】：How to properly load i18n resources in next-i18next from api endpoints?如何从 api 端点正确加载 next-i18next 中的 i18n 资源？
【发布时间】：2021-08-31 05:15:24
【问题描述】：

我有一个 nextjs 应用程序，我想使用 i18next 和 next-i18next (https://github.com/isaachinman/next-i18next) 对其进行扩展。

默认配置是在./public/locales/{lng}/{ns}.json下寻找json文件，其中lng是语言，ns是命名空间。

然而，我的要求是，这应该从 api 端点提供。我正在努力寻找正确的配置，因为next-i18next 现在确实忽略了我的设置，并且没有向我的后端发起任何 xhr 请求。

next-i18next.config.js：

const HttpApi = require('i18next-http-backend')

module.exports = {
    i18n: {
        defaultLocale: 'de',
        locales: ['en', 'de'],
    },
    backend: {
        referenceLng: 'de',
        loadPath: `https://localhost:5001/locales/de/common`,
        parse: (data) => {
            console.log(data)
            return data 
        }
    },
    debug: true,
    ns: ['common', 'footer', 'second-page'], // the namespaces needs to be listed here, to make sure they got preloaded
    serializeConfig: false, // because of the custom use i18next plugin
    use: [HttpApi],
}

我在这里不知所措。我做错了什么？

【问题讨论】：

这方面有进展吗？
是的，我已经解决了——只是没有来回答我自己的问题。今晚我会试一试

标签： reactjs next.js i18next react-i18next

【解决方案1】：

最终我把它拼凑在一起。

const I18NextHttpBackend = require('i18next-http-backend')

module.exports = {
    i18n: {
        defaultLocale: 'de',
        locales: ['de'],

        backend: {
            loadPath: `${process.env.INTERNAL_API_URI}/api/locales/{{lng}}/{{ns}}`
        },
    },
    debug: true,
    ns: ["common", "employees", "projects"],
    serializeConfig: false,
    use: [I18NextHttpBackend]
}

您可能会遇到错误提示 You are passing a wrong module! Please check the object you are passing to i18next.use()。如果是这种情况，您可以使用以下导入强制 http 后端加载为 commonjs：

const I18NextHttpBackend = require('i18next-http-backend/cjs')

第一个在 webpack 5 上工作，而我不得不在 webpack 4 上使用 cjs 导入。虽然我找不到原因。

此后，一帆风顺：

_app.tsx：

/*i18n */
import { appWithTranslation } from 'next-i18next'
import NextI18nextConfig from '../../next-i18next.config'

const MyApp = ({ Component, pageProps }: AppProps) => {
  return (
    <>
      <MsalProvider instance={msalApp}>
        <PageLayout>
          <Component {...pageProps} />
        </PageLayout>
      </MsalProvider>
    </>
  )
}

export default appWithTranslation(MyApp, NextI18nextConfig)

anypage.tsx：

export const getServerSideProps: GetServerSideProps = async ({ locale }) => {
  return {
    props: {
      ...(await serverSideTranslations(locale, ['common', 'employees'])),
      // Will be passed to the page component as props
    },
  };
}

如果您只需要获取一次语言环境，则在构建期间，您可以改用 getStaticProps - 这取决于您。

【讨论】：