next-i18next未能从公用文件夹加载区域设置

Question

我迁移到next.js，并开始使用next-i18next。我想知道，如何从公用文件夹中生成next-i18next加载区域设置？只有当我将locales文件夹放置在根目录而不是公共目录时，它才能工作。

i18n.json；

{
    "locales": ["en", "fr", "ar"],
    "defaultLocale": "en",
    "pages": {
      "*": ["common"]
    }
}

next.config.js；

// next.config.js
const nextTranslate = require("next-translate");

module.exports = {
  ...nextTranslate(),
};

Answer 1

创建i18n.js文件根，在内部添加以下代码: const = require(' path ')；

module.exports = {
  i18n: {
    locales: ['en', 'ru', 'tm'],
    defaultLocale: 'en',
    localeDetection: false,
    localePath: path.resolve('./public/locales'),
  },
};

并添加配置next.config.js文件如下：

const { i18n } = require('./i18n');

const nextConfig = {
  reactStrictMode: true,
  i18n,
};

module.exports = nextConfig;

在每一页之后添加转换代码。示例: index.file

import React, { useContext, useEffect } from 'react';
import { serverSideTranslations } from 'next-i18next/serverSideTranslations';
import { useTranslation } from 'next-i18next';
import Router from 'next/router';
import { Title } from '../components';
import i18n from '../i18n';

const Home = () => {
  const { t } = useTranslation('');

  useEffect(() => {
    if (!user) {
      Router.push('/login');
    }
  });
  return (
    <>
      <Title title={`${t('page.home')} | Trillo`} />
      <div className="min-h-screen">Home</div>
    </>
  );
};

export const getServerSideProps = async ({ locale }) => (
  { props: {
    ...(await serverSideTranslations(
      locale,
      ['common'],
      i18n,
    )),
  } }
);

export default Home;

在这样的公用文件夹中创建这些文件之后。看看这个和见此2