如何在Next.js中为非默认区域设置生成动态路径？

How to generate dynamic paths for non-default locales in Next.js?(如何在Next.js中为非默认区域设置生成动态路径？)

问题描述

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

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

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

// 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']))
    }
  }
}

推荐答案

对于动态路由，您必须显式返回要从getStaticPaths函数预先生成的区域设置。否则，Next.js将仅为默认区域设置生成页面。

来自Internationalized Routing文档：

对于使用getStaticProps且具有动态路由的页面，所有区域设置 需要返回想要预先呈现的页面的变体 发件人getStaticPaths。以及返回的params对象 paths，您还可以返回指定区域设置的locale字段 您要呈现。

这可以通过修改getStaticPaths函数为每个插件/区域设置组合生成路径来实现。

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 }
}

这篇关于如何在Next.js中为非默认区域设置生成动态路径？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持编程学习网！