NextJS使用next-translate做多语言路由时英文路径返回404如何解决

这个问题需要同时从配置文件、静态生成路由逻辑、Link组件三个层面共同修正，单独修改某一处无法解决问题：

1. 修正next.config.js的rewrites配置 #

你之前的rewrites配置有两处错误：一是destination没有保留动态slug参数，二是只适配了en单一语言，修改后配置如下：

require('dotenv').config();
const nextTranslate = require('next-translate');

module.exports = nextTranslate({
    async rewrites() {
        return [
            {
                source: '/:locale(en|tr)/post/:slug',
                destination: '/post/:slug',
            },
        ]
    },
    env: {
        NEXT_PUBLIC_URL: process.env.NEXT_PUBLIC_URL,
    },
})

2. 修正[slug].js的静态生成逻辑 #

你当前设置了fallback: false，要求所有可访问的路径必须在构建阶段预生成，但你之前的getStaticPaths没有为每个语言生成对应路径，所以en前缀的路径根本没有对应静态文件，自然返回404。
修改后的getStaticPaths和getStaticProps如下：

export async function getStaticPaths({ locales }) {
   const { data } = await fetch('fromAPI');
   const paths = []
   // 遍历所有支持的语言，为每个语言生成对应访问路径
   for (const locale of locales) {
     data.forEach(item => {
       paths.push({
         params: {
           slug: `${slug(item.title)}-${item.id}`
         },
         locale
       })
     })
   }
   return {
        paths,
        fallback: false
    }
}

export async function getStaticProps({ params, locale }) {
    // 拉取对应语言的文章数据，避免不同语言返回相同内容
    const { data } = await fetch(`fromAPI?slug=${params.slug}&locale=${locale}`);
    return { props: { data } }
}

如果文章量级大不想全量预生成，可以把fallback改为'blocking'，首次访问未预生成的路径时会自动动态生成静态文件。

3. 修正Link组件的多语言适配 #

next-translate会自动给非默认语言的路径加locale前缀，你需要让Link组件适配当前语言：

// 方案1：使用原生Link，手动传入当前语言
import Link from 'next/link'
import useTranslation from 'next-translate/useTranslation'

// 组件内部获取当前激活的语言
const { lang } = useTranslation()
<Link 
  key={`L${item.id}`} 
  href="/post/[slug]" 
  as={`/post/${slug(item.title)}-${item.id}`}
  locale={lang}
>
</Link>

// 方案2：直接使用next-translate提供的TransLink组件，自动适配语言
import TransLink from 'next-translate/TransLink'

<TransLink 
  key={`L${item.id}`} 
  href="/post/[slug]" 
  as={`/post/${slug(item.title)}-${item.id}`}
>
</Link>

内容的提问来源于stack exchange，提问作者BK52