Next.js i18n动态路由/lang/vacancies/[id]访问报404错误如何解决

• 你getStaticPaths的代码存在两处逻辑错误：一是对arr做map操作时没有接收返回值，生成的路径条目本身就有缺失；二是错误把locale放到了动态路由params参数里——Next.js 内置i18n场景下，locale是路径的全局配置项，不属于动态路由的参数，不需要放到params中。
• 你启用了Next.js i18n功能但没有按照官方规则返回getStaticPaths的路径结构，多语言动态路由的每一条路径需要单独指定locale顶级字段，系统才会自动生成带语言前缀的访问路径。

1. 替换修正后的getStaticPaths代码 #

export const getStaticPaths: GetStaticPaths<{ id: string }> = async () => {
    const paths: { params: { id: string }, locale: string }[] = [];
    await axios.get(`https://career.tele2.kz/cms/vacancies`).then(response => {
        response.data.forEach((vacancy:any) => {
            // 收集当前职位所有支持的语言版本
            const allLocaleItems = [
                { id: vacancy.id.toString(), locale: vacancy.locale },
                ...vacancy.localizations
            ];
            // 按Next.js要求的格式生成路径条目
            allLocaleItems.forEach(item => {
                paths.push({
                    params: { id: item.id.toString() },
                    locale: item.locale // locale放在路径条目顶级，不要塞到params里
                })
            })
        });
    });
    return { paths, fallback: false }
};

2. 确认next.config.js的i18n配置正确 #

你不需要在pages目录下手动创建en、kz等语言文件夹，Next.js i18n会自动处理路径前缀，只需要在next.config.js里配置支持的语言即可，示例配置如下：

module.exports = {
  i18n: {
    locales: ['kz', 'ru', 'en'], // 替换为你实际支持的所有语言
    defaultLocale: 'ru', // 替换为你的默认语言
  },
}

3. Link组件写法不用修改 #

你当前的Link组件写法符合Next.js i18n的使用规范，系统会自动根据你指定的locale属性生成对应前缀的跳转路径。

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