javascript - 尝试使用提供的 localeSubpaths 配置访问任何页面时出现 next-i18next 404 错误
问题描述
尝试访问 Next.js 应用程序的任何页面时,我都遇到了 404 问题。
当没有localeSubpaths
提供配置时,应用程序可以正常工作。
实施localeSubpaths
配置(next.config.js)后:
const localeSubpaths = {
en: "en",
"de-DE": "de-DE",
fr: "fr"
};
应用程序不再工作。
每次我尝试访问主根目录/
或任何语言环境页面fr
时,de-DE
浏览器都会显示 404 错误页面(自定义 Next.js 错误页面)。此页面包含一些可以正常工作的翻译内容。
页面还包含指向/
主页的链接。当我通过单击链接导航到主页时 - >主页正确加载(包括相关翻译)
i18n.tsx
配置文件:
import NextI18Next from "next-i18next";
import getConfig from "next/config";
import path from "path";
const { publicRuntimeConfig } = getConfig();
const { localeSubpaths } = publicRuntimeConfig;
const NextI18NextInstance = new NextI18Next({
defaultLanguage: "en",
ns: ["common"],
defaultNS: "common",
otherLanguages: ["de-DE", "de-CH", "fr"],
strictMode: false,
localeSubpaths,
localePath: path.resolve("./public/static/locales")
});
export default NextI18NextInstance;
const {
appWithTranslation,
i18n,
Link,
withTranslation,
Router
} = NextI18NextInstance;
export { appWithTranslation, i18n, Link, withTranslation, Router };
解决方案
确保您没有在 next.config.js 文件中定义任何 i18n 条目,因为这将与重定向条目重叠。
next.config.js
const localeSubpaths = {
en: 'en',
es: 'es'
}
[...]
//remove any reference to this entry
//i18n: [...]
rewrites: async () => nextI18NextRewrites(localeSubpaths),
publicRuntimeConfig: {
localeSubpaths,
}
i18n.ts
import NextI18Next from 'next-i18next'
import path from 'path'
const localeSubpaths = {
en: 'en',
es: 'es'
}
const NextI18NextInstance = new NextI18Next({
browserLanguageDetection: false,
ns: ["common"],
defaultNS: "common",
fallbackLng: 'en',
otherLanguages: ['es'],
localeSubpaths: localeSubpaths,
defaultLanguage: 'en',
localePath: path.resolve('./public/locales'),
})
export const { appWithTranslation, useTranslation, withTranslation, Link, i18n} = NextI18NextInstance;
export default NextI18NextInstance;
推荐阅读
- php - 通过表单选择选项插入 mysql 外键值
- google-apps-script - 使用 Google Apps 脚本和 Pastebin.com API 发布粘贴
- cloud - 如何使用由 openstack、cloustack、vrealise 创建的不同云?
- dom - 计算的 DOM 节点/事件数与 Chrome 开发工具中的数字不一致
- php - 如何在 3 模型关系上使用同步?- 拉拉维尔
- python - 使用字符串拆分python的问题
- npm - NPM - 如何覆盖我的依赖项之一?
- c# - c# CURLOPT_COOKIEJAR 和 CURLOPT_COOKIEFILE 与 HttpClient
- matlab - 在 Maple 中定义一个 4 阶张量
- c# - 随机化 3 种颜色