英文:
i18n routing in Next.js using graphql results in 404 for non default locale
问题
我们正在使用GraphQL和NextJS。我们尝试使用getStaticPaths函数创建路径。这些路径具有正确的格式（见日志的截图）。
路径有效，并且对于默认语言环境下的每个页面，会显示正确的页面。如果切换到另一种语言环境，会得到404错误。
export async function getStaticPaths() {
const data = await client.query({
query: allPages
});
const paths = data.data.ItemForPage.filter((pagee) =>
pagee.content.general.path !== null
).map((page) => {
return {
params: { page: [page.content.general.path], locale : page.language },
}
});
console.log("paths",paths);
return {
paths : paths,
fallback: false,
}
}
next.config
module.exports = {
i18n: {
locales: ['en', 'nl'],
defaultLocale: 'nl',
}
}
我们尝试通过硬编码两个路径，对于“nl”是“contact”，对于“en”也是“contact”。如果“nl”是默认语言环境，则该页面会显示正确。如果切换到“en”版本，会得到404错误，反之亦然。
我创建了一个可以重现这个问题的codesandbox：https://codesandbox.io/p/sandbox/determined-neumann-7sbwmt?file=%2FREADME.md
英文:
We are working with GraphQL and NextJS. We try to create paths with the getStaticPaths function. These paths have the right format (see screenshot of the logs).
The paths work and the correct page is shown for every page with the default locale. If you change to another locale you get a 404.
export async function getStaticPaths() {
const data = await client.query({
query: allPages
});
const paths = data.data.ItemForPage.filter((pagee) =>
pagee.content.general.path !== null
).map((page) => {
return {
params: { page: [page.content.general.path], locale : page.language },
}
});
console.log("paths",paths);
return {
paths : paths,
fallback: false,
}
}
next.config
module.exports = {
i18n: {
locales: ['en', 'nl'],
defaultLocale: 'nl',
}
}
We tried by hardcoding two paths, "contact" for "nl" and for "en". If "nl" is the default locale, this page is shown correctly. If we go to the "en" version we get a 404 and vice versa.
I've created a codesandbox reproducing the problem https://codesandbox.io/p/sandbox/determined-neumann-7sbwmt?file=%2FREADME.md
答案1
得分: 2
以下是已翻译的内容：
问题在于您的路径可能是一个无效的字符串。
为了让路由正常工作，您的路径需要是一个字符串。
您可以通过使用反引号来实现这一点：
page: [`${page.content.general.path}`]
但这不会修复实际的问题。之所以只有您的defaultLocale起作用，是因为您放错了括号。您的语言目前位于路径的同一对象中，但需要位于params对象中。
请用以下代码替换您当前的代码：
params: { page: [`${page.content.general.path}`] }, locale: page.language,
您的代码应该类似于这样：
export async function getStaticPaths() {
const data = await client.query({
query: allPages
});
const paths = data.data.TideItemForPage.filter((pagee) =>
pagee.content.general.path !== null
).map((page) => {
return {
params: { page: [`${page.content.general.path}`] }, locale: page.language,
}
});
console.log("paths", paths.map((path) => path.params))
return {
paths: paths,
fallback: false,
}
}
您可以在以下链接中了解更多信息：
https://nextjs.org/docs/advanced-features/i18n-routing
英文:
The problem is that your path is possible a invalid string.
In order to actually let the routing work, your path needs to be a string.
You can achieve this by using backticks:
page: [`${page.content.general.path}`]
But that won't fix the actual problem. The reason why only your defaultLocale is working, is because you misplaced a bracket. Your language is currently in the same object of your path, but needs to be in the params object.
Replace your current code with this:
params: { page: [`${page.content.general.path}`] }, locale: page.language,
Your code should look something like this:
export async function getStaticPaths() {
const data = await client.query({
query: allPages
});
const paths = data.data.TideItemForPage.filter((pagee) =>
pagee.content.general.path !== null
).map((page) => {
return {
params: { page: [`${page.content.general.path}`] }, locale: page.language,
}
});
console.log("paths", paths.map((path) => path.params))
return {
paths: paths,
fallback: false,
}
}
You can read more about this on:
https://nextjs.org/docs/advanced-features/i18n-routing
通过集体智慧和协作来改善编程学习和解决问题的方式。致力于成为全球开发者共同参与的知识库，让每个人都能够通过互相帮助和分享经验来进步。
评论