我有一个Next应用程序,它只有两个路由:一个index.tsx
和一个[slug].tsx
。slug路由使用getStaticProps
和getStaticPaths
从CMS获取页面。
我已经通过在我的next.config.js
中添加以下内容启用了国际化路由:
i18n: {
locales: ["en", "fr"],
defaultLocale: "en",
}
index
路由工作正常,如果我使用fr-FR
的Accept-Language
头部访问/
,我会被重定向到/fr
子路由。不工作的是动态路由[slug].tsx
。如果我直接访问它,而且在getStaticProps
中打印我的locale会显示默认的en
locale,而不是从我的Accept-Language
头计算出来的locale。
我知道人们通常会忘记在getStaticPaths
中生成locale路径,我不认为这是问题所在,下面是我如何生成它们的:
export const getStaticPaths: GetStaticPaths = async ({ locales }) => {
const clients = await fetchClients();
const paths = locales
.map((locale) => clients.map((c) => ({ params: { slug: c.id }, locale })))
.flat();
return {
paths,
fallback: "blocking",
};
};
你知道怎么回事吗?谢谢!
1条答案
按热度按时间wlwcrazw1#
自动语言检测目前只在根目录下工作。这个问题的评论和文档提到了这一点。
路径生成代码看起来是正确的。如果用户访问索引页,然后导航到子页,他们应该被重定向到正确的区域设置(如果没有翻译,则为默认设置)
您可以使用中间件来手动控制此行为。
首先,我们需要禁用
localeDetection
。然后,您可以创建一个新的中间件来检查
Accept-Language
头并将用户重定向到正确的页面。这是Next.js文档中关于默认语言环境前缀的示例的略微修改版本。