如何在 Next.js 中为非默认语言环境生成动态路径？

Question

我正在使用 next-i18next 构建具有国际化功能的 Next.js 应用程序。为我网站的所有页面生成页面，包括英语和法语，但具有动态路由的页面除外：（即blog/[id]/[blog-title]）。对于具有动态路由的页面，会为英语生成页面，但不会为法语生成页面。

我应该注意到，两种语言的博客条目都是相同的。因此，如果用户点击列表中的博客条目，他们将获得相同的博客条目。

当法语用户访问具有动态路由的页面时，他们会收到 404。我是 React 和 Next 的新手，所以我可能会在这里做一些愚蠢的事情。

// next-i18next.config.js
module.exports = {
  i18n: {
    locales: ['en', 'fr'],
    defaultLocale: 'en',
    localeDetection: true,
  },
}

//
// blog\[id]\[title] 
//
export async function getStaticPaths() {
  const response = await axios.get('https://api.myappi.com/blog')
  const posts = response.data

  const paths = posts.map((post: Props) => ({
    params: { id: post.Id, title: post.Title },
  }))  
 
  return { paths, fallback: false }
}

export async function getStaticProps(props: IStaticProps) {
  const { id, locale } = props.params
  const response = await axios.get(`https://api.myappi.com/blog/${id}`)
  const post = await response.data

  if (!post) {
    return {
      notFound: true,
    }
  }

  return {
    props: { 
      Id: post.Id,
      Title: post.Title,
      Blog: post.Blog,
      DatePosted: post.DatePosted, 
      PostedBy: post.PostedBy,
      ...(await serverSideTranslations(props.locale, ['common', 'blog']))
    }
  }
}

Answer 1

对于动态路由，您必须显式返回要从 getStaticPaths 函数预先生成的语言环境。如果不这样做，Next.js 只会为默认语言环境生成页面。

来自Internationalized Routing 文档：

对于使用 getStaticProps 和动态路由的页面，所有语言环境 需要返回需要预呈现的页面变体 来自getStaticPaths。连同返回的 params 对象 paths，您还可以返回一个 locale 字段指定哪个区域设置 你想渲染。

这可以通过修改 getStaticPaths 函数来为每个 slug/locale 组合生成路径来实现。

export async function getStaticPaths({ locales }) { // Get available locales from `context`
   const response = await axios.get('https://api.myappi.com/blog')
   const posts = response.data

   const paths = posts
       .map((post: Props) => locales.map((locale) => ({
           params: { id: post.Id, title: post.Title },
           locale // Pass locale here
       })))
       .flat() // Flatten array to avoid nested arrays
 
   return { paths, fallback: false }
}