Next-i18next 初始语言环境参数未传递到 serverSideTranslations

Posted

技术标签:

【中文标题】Next-i18next 初始语言环境参数未传递到 serverSideTranslations【英文标题】:Next-i18next Initial locale argument was not passed into serverSideTranslations 【发布时间】:2021-07-04 22:05:59 【问题描述】:

它在本地工作。 但是,一旦我将它部署到 firebase 上,它会产生 nextServer 500 内部错误。

下一个-i18下一个版本

8.1.3

配置

module.exports = 
  i18n: 
    defaultLocale: 'en',
    locales: ['en', 'ko'],
  ,
;

代码

_app.tsx

import  appWithTranslation  from 'next-i18next';

const App = ( Component, pageProps : AppProps): JSX.Element => 
  return (
    <Provider store=store>
      <MainWrapper>
        <Component ...pageProps />
      </MainWrapper>
    </Provider>
  );
;

export default appWithTranslation(App);

关于 serverSideRendering 的代码 sn-ps

export const getStaticProps: any = async ( locale ) => (
  props: 
    ...(await serverSideTranslations(locale, [])),
  ,
);
export const getServerSideProps: GetServerSideProps = async (context) => 
  const  teamId, email  = context.query;
  let teamName;

  if (!teamId) 
    return  props:  ;
  

  if (teamId) 
    teamName = await getTeamName(teamId as string);
  

  return 
    props: 
      teamId,
      teamName,
      email: email || '',
      ...(await serverSideTranslations(context.locale, [])),
    ,
  ;
;

【问题讨论】:

你得到什么错误信息? 我有同样的错误 【参考方案1】:

我遇到了同样的问题,然后我记得在更改 next.config.js 文件后我必须手动重新启动 NEXTJS SERVER

重启服务器帮了我。

【讨论】:

【参考方案2】:

使用 next-compose-plugins 时,来自他们的Usage section,

// next.config.js
const withPlugins = require('next-compose-plugins');

module.exports = withPlugins([...plugins], nextConfiguration);

nextConfiguration 应该是配置,意思是一个对象。

所以下面的 sn-p 应该可以工作:

module.exports = withPlugins(
  [withMdx(mdxConfig)],
  
    i18n,
  
)

【讨论】:

这让我忙了太久。很容易忽略i18n 需要在withPlugins 的第二个参数中,而不是与插件一起出现在第一个参数中。【参考方案3】:

几天前我遇到了同样的错误,就我而言,根本原因是我的next.config.js 文件。我使用的是next-compose-plugins,但无法使其与 i18n 的配置一起使用。

这就是我之前的设置:

// next.config.js

module.exports = withPlugins([
  [
    withImages(
      esModule: true
    )
  ],
  i18n // error
])

所以现在我要添加没有withPlugins 的配置:

// next.config.js

module.exports = withImages(
  esModule: true,
  i18n
)

不确定这是否适合您,但出于调试目的,我建议您仅使用 i18n 配置测试您的应用程序。

// next.config.js

module.exports = 
  i18n

我的next-i18next.config.js的例子:

// next-i18next.config.js

module.exports = 
  i18n: 
    locales: ['pt', 'en-US'],
    defaultLocale: 'pt'
  

【讨论】:

【参考方案4】:

我遇到了同样的问题。我正在部署到 Azure 中的应用服务。这是我做的东西:

    更新 next.config.js

const path = require("path");
require("dotenv").config();
const withPlugins = require('next-compose-plugins')
const  i18n  = require('./next-i18next.config');

const withImages = require("next-images")(
  reactStrictMode: true,
  eslint: 
    dirs: ["apiclients", "common", "components", "config", "pages", "stores"],
  ,
  sassOptions: 
    includePaths: [
      path.join(__dirname, "styles"),
      path.join(__dirname, "components"),
    ],
    prependData: `@import "styles/_variables";`, // prepend _css variables in all css documents
  ,
  images: 
    domains: [""],
  ,
  webpack: (config,  buildId, dev, isServer, defaultLoaders, webpack ) => 
    config.plugins.push(new webpack.EnvironmentPlugin(process.env));
    return config;
  ,
  experiments: 
    asset: true,
  
);

const plugins = [withImages];
const nextConfig =  i18n ;

module.exports = withPlugins(plugins, nextConfig);
    将 next.config.js 和 next-18next.config.js 包含到下一个 JS 的生产版本中 重启服务器

【讨论】:

【参考方案5】:

不要忘记将密钥 i18n 放入您的 next-i18next.config 文件中

【讨论】:

【参考方案6】:

withPlugins 接受两个参数,第一个是数组,最后一个(默认)是

一个对象。你应该把 i18n 放到一个对象列表中:

const plugins = [withImages];

const nextConfig =  i18n ;

module.exports = withPlugins(plugins, nextConfig);


/**
 * Composes all plugins together.
 *
 * @param array plugins - all plugins to load and initialize
 * @param object nextConfig - direct configuration for next.js (optional)
 */
const _withPlugins = **([...plugins], nextConfig = )** => (phase, 
  defaultConfig
) => 
  ......
;

【讨论】:

您的答案可以通过额外的支持信息得到改进。请edit 添加更多详细信息,例如引用或文档,以便其他人可以确认您的答案是正确的。你可以找到更多关于如何写好答案的信息in the help center。

以上是关于Next-i18next 初始语言环境参数未传递到 serverSideTranslations的主要内容,如果未能解决你的问题,请参考以下文章

获取当前语言 next-i18next

Next-i18Next 在 NextJS 中阻塞全局状态

当nextjs中的语言改变时,如何用next-i18next改变<Html“lang”/>?

Nextjs 动态路由与 next-i18next 构建错误

如何使用 NextJS 和 next-i18next 翻译路线?

next-i18next 翻译在故事书中不起作用,控制台日志丢失键