在Next.js中使用graphql的i18n路由导致非默认区域设置为404

zdwk9cvp 于 2023-04-20 发布在其他

关注(0)|答案(1)|浏览(132)

我们正在使用GraphQL和NextJS。我们尝试使用getStaticPaths函数创建路径。这些路径具有正确的格式（参见screenshot of the logs）。
路径起作用，并且为每个具有默认区域设置的页面显示正确的页面。如果您更改为其他区域设置，则会得到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',
  }
}

我们尝试硬编码两个路径，“contact”对应“nl”和“en”。如果“nl”是默认语言环境，则此页面会正确显示。如果转到“en”版本，则会出现404，反之亦然。
我已经创建了一个codesandbox来重现问题https://codesandbox.io/p/sandbox/determined-neumann-7sbwmt?file=%2FREADME.md

next.js

来源：https://stackoverflow.com/questions/76053226/i18n-routing-in-next-js-using-graphql-results-in-404-for-non-default-locale

1条答案

按热度按时间

kpbwa7wx1#

问题是你的路径可能是一个无效的字符串。为了真正让路由工作，你的路径需要是一个字符串。
您可以通过使用反引号来实现这一点：

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

赞(0）回复(0）举报 2023-04-20

我来回答

在Next.js中使用graphql的i18n路由导致非默认区域设置为404

1条答案

相关问题

热门标签

最新问答