vercel.json与next.config.js的Rewrites配置差异、优势及优先级问询

二者配置的差异 #

• 适用范围不同：
  • vercel.json是Vercel平台通用配置文件，支持所有部署在Vercel上的项目（包括静态站点、非Next.js的React/Vue项目、Node.js服务等）。
  • next.config.js是Next.js框架专属配置，仅对Next.js项目生效，非Next.js项目不会读取该文件的规则。
• 配置语法与灵活性不同：
  • vercel.json采用JSON格式，重写规则是静态数组，每个规则包含source、destination等固定字段，仅支持静态配置。
  • next.config.js采用JavaScript格式，重写可以是静态数组，也可通过异步函数动态生成规则（比如根据环境变量、外部接口数据生成匹配逻辑），支持复杂的条件判断。
• 功能细节支持不同：
  • vercel.json的重写可结合Vercel平台特性，比如针对特定地域、设备的规则，还能关联边缘函数配置；但本地开发时需依赖Vercel CLI才能生效。
  • next.config.js的重写支持has条件匹配（如查询参数、Cookie判断）、国际化路由联动，且本地开发时用next dev即可直接生效，无需额外工具。

Vercel托管场景下的使用优势 #

使用vercel.json的优势 #

• 统一管理Vercel平台的所有配置项（重写、重定向、Headers、边缘函数、域名设置等），配置更集中。
• 规则在Vercel边缘网络层面生效，无需经过Next.js服务器处理，性能表现更优。
• 支持Next.js重写不具备的平台专属特性，比如地域路由、设备类型路由。

使用next.config.js的优势 #

• 与Next.js框架配置整合，符合Next.js项目的结构规范，便于维护。
• 支持动态生成重写规则，灵活度更高，能应对复杂的业务场景（比如根据不同环境切换重写目标）。
• 本地开发调试更便捷，直接通过next dev即可测试重写规则，无需依赖Vercel CLI。
• 可与Next.js的其他特性（如国际化、中间件）联动，规则逻辑更贴合框架生态。

配置优先级 #

当两个文件同时配置了重写规则时，next.config.js的重写规则优先级更高。Vercel会优先处理Next.js框架层面的重写规则，若请求已被Next.js的规则匹配并处理，vercel.json中对应的规则将不会再生效。

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