通过 Url 的路径确定语言答案

【问题标题】：Determining the language by the path of Url通过 Url 的路径确定语言
【发布时间】：2021-01-13 19:09:12
【问题描述】：

我试图通过在 next-i18next 包中更改站点的子路径来找到一种更改语言的方法，我在 Internet (https://github.com/isaachinman/next-i18next/issues/32 , https://github.com/i18next/i18next-browser-languageDetector#detector-options) 上搜索了这个问题的答案，但它确实做到了不行。更改 url 中的子路径后，它被复制并将我重定向到一个不存在的页面。

我的代码：

// path-to-my-project/i18n.js
const NextI18Next = require('next-i18next').default;
const i18nextBrowserLanguageDetector = require('i18next-browser-languagedetector').default;
const { localeSubpaths } = require('next/config').default().publicRuntimeConfig;
const path = require('path');

module.exports = new NextI18Next({
    otherLanguages: ['ru'],
    defaultNS: 'common',
    localeSubpaths,
    localePath: path.resolve('./public/static/locales'),
    use: [i18nextBrowserLanguageDetector],
});

// path-to-my-project/pages/_app.js
import '../styles/main.scss';
import NProgress from 'nprogress';
import 'nprogress/nprogress.css';
import Router from 'next/router';
import App from 'next/app';
import { appWithTranslation } from '../i18n';

Router.events.on('routeChangeStart', () => NProgress.start());
Router.events.on('routeChangeComplete', () => NProgress.done());
Router.events.on('routeChangeError', () => NProgress.done());

const MyApp = ({ Component, pageProps }) => (
    <Component {...pageProps} />
);

MyApp.getInitialProps = async (appContext) => ({ ...await App.getInitialProps(appContext) });

export default appWithTranslation(MyApp);

也许我只是错过了一些东西，因为这是我在 next.js 上的第一个项目，所以我在社区中寻求帮助，如果有任何帮助或提示，我将不胜感激。

【问题讨论】：

标签： next.js react-i18next next-i18next i18next-browser-languagedetector

【解决方案1】：

默认情况下，next-i18next 会尝试检测从users browser 显示的语言。

尝试禁用它。

const NextI18Next = require('next-i18next').default
const { localeSubpaths } = require('next/config').default().publicRuntimeConfig
const path = require('path')

module.exports = new NextI18Next({
  browserLanguageDetection: false, // <---
  serverLanguageDetection: false, // <---
  otherLanguages: ['de'],
  localeSubpaths,
  localePath: path.resolve('./public/static/locales')
})

【讨论】：

但是现在通过url更改语言时，服务器返回404
也就是说，将英语更改为俄语时一切正常，但将俄语更改为英语时返回 404，并在更改语言的按钮的帮助下一切正常。

【解决方案2】：

在文件 next.config.js 我有这个设置：

// path/to/project/next.config.js

const { nextI18NextRewrites } = require('next-i18next/rewrites');

const localeSubpaths = {
    ru: 'ru',
};

module.exports = {
    rewrites: async () => nextI18NextRewrites(localeSubpaths),
    publicRuntimeConfig: {
        localeSubpaths,
    },
    devIndicators: {
        autoPrerender: false,
    },
};

但是没有足够的英文本地化配置，所以你只需要添加它：

// path/to/project/next.config.js

const { nextI18NextRewrites } = require('next-i18next/rewrites');

const localeSubpaths = {
    en: 'en', // <------
    ru: 'ru',
};

module.exports = {
    rewrites: async () => nextI18NextRewrites(localeSubpaths),
    publicRuntimeConfig: {
        localeSubpaths,
    },
    devIndicators: {
        autoPrerender: false,
    },
};

【讨论】：