添加next-i18next后，我在vercel中获得404页面

Question

我已经添加了next-i18next应用程序用于国际化。在此之后，vercel中的所有页面都变成404页面。

顺便说一下，它在本地工作得很好。

为什么?？

const { i18n } = require("./next-i18next.config");
module.exports = {
i18n: {
locales: ["en", "fr", "nl-NL", "nl-BE", "de", "ja"],
defaultLocale: "ja",

https://skripts.vercel.app/

上面是我网站的URL。日志中有一个this错误。

Failed to load resource: the server responded with a status of 500 ()

Answer 1

也许你需要添加"getStaticProps"到动态路由页面?

// pages/blog/[slug].js
export const getStaticPaths = ({ locales }) => {
return {
paths: [
// if no `locale` is provided only the defaultLocale will be generated
{ params: { slug: 'post-1' }, locale: 'en-US' },
{ params: { slug: 'post-1' }, locale: 'fr' },
],
fallback: true,
}
}

如下所述:https://nextjs.org/docs/advanced-features/i18n-routing dynamic-routes-and-getstaticprops-pages

我有React + Next.js + next-i18next + Vercel应用程序。当我部署到Vercel时，我开始在控制台得到一个错误:

Internal Server Error 500 with all *.json files.

我只是添加了"locale"键>值，这是解决我的问题。

Answer 2

SOLVED

请阅读https://github.com/i18next/next-i18next#vercel-and-netlify这将解决所有的问题

const path = require('path');
module.exports = {
i18n: {
defaultLocale: 'en',
locales: ['en', 'es'...],
},
...(typeof window === undefined
? { localePath: path.resolve('./public/locales') }
: {}),
};
code by @stophecom

这发生在我身上，我找到的唯一解决方案是生成所有的页面(4000)，几乎20分钟来做一个部署:(

const getStaticPaths = async () => {
const res = await fetch(`${process.env.NEXT_PUBLIC_API_BASE_URL}/xxx`);
const projects = await res.json();
const slugs = projects.map((p) => slugifyForFront(p.slug));
const { locales } = i18n;
const paths = slugs.flatMap((slug) =>
locales.map((locale) => ({
params: { slug },
locale: locale,
}))
);
return { paths, fallback: false };
};

可能不是最好的解决方案，但我不能使它工作使用fallback: true | blocking总是404

我希望有人能提出更好的解决方案