Next.js本地运行时本地化API路由404 单API路由适配多locale方案

1. 本地开发环境非默认语言页API请求404修复 #

问题核心原因有两个，对应修复方式如下：

• 首先检查客户端fetch写法：当前用的fetch(api/route/path)是相对路径写法，会继承当前页面的URL前缀，在带/ko、/de等locale前缀的页面下，自然会被解析成/ko/api/route/path这类地址，本地开发服务器没有做自动匹配就会返回404。
  直接把请求路径改成带开头斜杠的根绝对路径即可，这种写法在所有语言页下都会直接请求站点根目录下的API地址，不会自动拼接locale前缀：

  // 错误：相对路径，会继承当前页面路径
  // const res = await fetch(`api/route/path`);
  // 正确：根绝对路径，固定请求根目录下API
  const res = await fetch(`/api/route/path`);
  

• 如果项目里历史请求太多，不方便全量修改路径，可以直接在next.config.js中添加重写规则，把所有带locale前缀的API请求统一转发到根目录的API路由，配置完重启本地开发服务即可生效：

  const nextConfig = {
    i18n: {
      locales: ['en', 'de', 'ko'],
      defaultLocale: 'en',
    },
    async rewrites() {
      return [
        {
          // 匹配所有带locale前缀的API请求
          source: '/:locale/api/:path*',
          // 转发到根目录下对应API路由
          destination: '/api/:path*',
        }
      ]
    },
    // 其余原有配置...
  };
  
  module.exports = nextConfig;
  

2. 多locale共用单套API路由、避免重复生成serverless函数方案 #

上面配置的重写规则可以直接实现这个需求：

• 所有带locale前缀的API请求，不管是本地开发还是Vercel部署环境，最终都会被转发到pages/api/目录下的同一套API逻辑处理，不需要为每个locale单独编写API代码，也不会生成多份冗余的serverless函数。
• 注意不要为了适配i18n把API路由放到pages/[locale]/api/这类嵌套目录下，这种目录结构才会触发多路由、多函数生成。只要把所有API逻辑统一放在根目录pages/api/下即可。
• 如果需要在API逻辑中获取当前请求对应的locale，不需要手动拆分URL路径，直接从请求头里读取解析，或者用Next.js内置的i18n上下文获取即可，示例：

  // pages/api/route/path.js
  export default function handler(req, res) {
    // 从请求头获取当前locale，不需要解析路径
    const locale = req.headers['accept-language']?.split(',')[0] || 'en';
    // 通用业务逻辑，不需要为不同locale单独写分支
    res.status(200).json({ code: 0, msg: 'success', locale })
  }
  

配置完成后，本地开发环境不会再出现API 404问题，部署到Vercel后也只会生成一套API对应的serverless函数，不会为每个locale重复生成实例。

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