next-18next 初始语言环境参数未传递到 serverSideTranslations

Question

在这里发帖是因为 next-18next 的开发人员建议。升级 i18next 和 nextjs 后，next-i18next 将无法工作。我来了

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

在 index.js 上。更新前的工作结构有点不同。我在转换过程中遵循了官方文档。我可以在 index.js 上获得 locales 选项，但其他变量像 locale 本身一样未定义。

当前包版本： "next-i18next": "^8.1.2",

next-i18next.config.js

const path = require("path");

module.exports = {
  i18n: {
    defaultLocale: "en",
    locales: ["en", "tr"],
  },
  localePath: path.resolve("./public/static/locales"),
  otherLanguages: ["en", "tr"],
  defaultLanguage: "en",
  fallbackLng: ["en"],
};

next.config.js

const dotEnvResult = require("dotenv").config();
const path = require("path");
const withImages = require("next-images");
const withCSS = require("@zeit/next-css");
const withLess = require("@zeit/next-less");
const { i18n } = require("./next-i18next.config");
...

module.exports = withCSS(
  withLess(
    withImages({
      lessLoaderOptions: {
        javascriptEnabled: true,
      },
      env: {
        ...
      },
      ...
      i18n,
      webpack: (config) => {
        config.node = {
          fs: "empty",
        };
        return config;
      },
    })
  )
);

_app.js

import React from "react";
import App from "next/app";
// import { appWithTranslation } from "../i18n";
import { appWithTranslation } from "next-i18next";
...

class MyApp extends App {
  render() {
    const { Component, pageProps } = this.props;
    return <Component {...pageProps} />;
  }
}

export default appWithTranslation(MyApp);

index.js

import React from "react";
import Link from "next/link";
// import { i18n, Link, withTranslation } from "../i18n";
import { serverSideTranslations } from "next-i18next/serverSideTranslations";
import {withTranslation} from "next-i18next"
...

export async function getServerSideProps(locale) {
  console.log(locale.locale, locale.req.query);
  return {
    props: {
      ...(await serverSideTranslations(locale.locale, ["common"])),
      userQuery:
        typeof locale.req.query === "undefined" ? null : locale.req.query,
    },
  };
}

class Index extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      ...
    };
  }

  ...
  render() {
    return (
        ...
    );
  }
}

export default withTranslation("common")(Index);

Answer 1

将您的next-i18next.config.js 更改为

const path = require("path");

module.exports = {
  i18n: {
    defaultLocale: "en",
    locales: ["en", "tr"],
    localePath: path.resolve("./public/static/locales"),
    otherLanguages: ["en", "tr"],
    defaultLanguage: "en",
    fallbackLng: ["en"],
  },
};