Блог

Публикую здесь, потому что разработчики next-18next предложили. next-i18next не будет работать после обновления как i18next, так и nextjs. Я получаю

Исходный аргумент локали не был передан в serverSideTranslations

на index.js. Рабочая структура перед обновлением была немного другой. Я следовал официальным документам во время конвертации. Я могу включить опцию локализации index.js но другие переменные не определены, как и сама локаль.

Текущая версия пакета: «следующий-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);
 

Измените свой 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"],
  },
};