尧图网站建设  定义 URL 跳转（308 与 307）)
文档教程知识库【免费下载链接】til:memo: Today I Learned项目地址https://gitcode.com/gh_mirrors/ti/til点击查看免费下载本篇整理 TIL 仓库中关于 Next.js 应用 URL 重定向的实践与其把重定向规则写在vercel.json里它只在 Vercel 部署层生效本地开发时毫无感知不如直接写进next.config.js的redirects()异步函数让next dev本地开发与线上部署行为完全一致。读完你可以掌握redirects()的完整配置写法、permanent字段对 308/307 状态码的控制逻辑以及如何在本地用curl快速验证跳转是否按预期生效。为什么要把重定向写进 next.config.js网站内容总会有迁移的时候博客文章改名、商品页换路径、旧域名跳新域名。人们早已把旧链接收藏起来或散布在互联网各处为了不破坏这些 URL就需要配置重定向规则。仓库中的姊妹篇 Add Web Server Layer Redirects 介绍了第一种做法把重定向写进项目根目录的vercel.json交给 Vercel 的 Web Server 层处理例如{ redirects: [ { source: blog/old-blog-post-name, destination: blog/new-blog-post-name }, { source: /store, destination: store.example.com } ] }第一条规则把站内某个路径重定向到同一域名下的另一个路径第二条规则把路径重定向到外部 URL。在 Vercel 平台上这些规则默认返回 308 状态码。但问题在于vercel.json是在部署时由 Vercel 平台解析的。当你本地运行next dev时这些规则根本不会被执行导致本地访问旧链接 404、部署后却跳转成功的割裂体验容易误导开发者尤其在调试阶段让人困惑。两种方案的对比对比维度vercel.jsonnext.config.js的redirects()生效层级Vercel 平台 Web Server 层Next.js 应用层dev server / 构建产物本地next dev是否生效否是状态码控制默认 308通过permanent显式控制 308 / 307配置格式JSONJavaScript支持逻辑与动态生成与框架耦合度依赖 Vercel 平台纯 Next.js可移植到任意托管环境因此把重定向下沉到next.config.js是让本地与线上行为保持一致的首选方式。在 next.config.js 中定义 redirects()Next.js 允许在next.config.js中通过redirects()异步函数声明重定向规则。当本地运行 Next dev server 时这些规则就会被处理并生效。一个完整可运行的最小示例比原笔记补充了module.exports导出并对路径规范做了修正// next.config.js const nextConfig { async redirects() { return [ { // 站内路径 → 站内路径旧博客文章搬到新地址 source: /blog/old-blog-post-name, destination: /blog/new-blog-post-name, permanent: true, }, { // 站内路径 → 外部 URL/store 跳转到独立商城站点 source: /store, destination: https://store.example.com, permanent: true, }, ]; }, }; module.exports nextConfig;规则对象的核心字段字段作用说明source匹配的请求路径建议以/开头按 Next.js 的路径匹配约定书写否则可能产生预期之外的匹配结果destination跳转目标站内路径建议同样带/外部地址则写完整 URL含协议与域名permanent是否永久重定向true产生 308false产生 307详见下一节几点实践要点redirects()是异步函数可以return静态数组也可以在内部做动态计算、按环境变量返回不同规则灵活性远高于静态 JSON。配置文件在较新版本中还支持next.config.mjsESM与next.config.tsTypeScript形态核心的redirects()API 保持一致。重定向规则按数组顺序逐一匹配第一个命中的规则生效因此更具体的规则应放在前面。redirects()属于框架层配置无论页面使用 Pages Router 还是 App Router请求匹配到source时都会执行跳转。提示原笔记示例中部分路径未带前导/且第二个规则对象缺少分隔逗号。上面给出的版本修正了这两处可直接复制运行。permanent: true → 308false → 307permanent是决定跳转语义的关键开关这也是原笔记最核心的结论permanent: true规则会被编译为308 Permanent Redirect告知客户端与搜索引擎该 URL 已永久迁移适合旧内容彻底搬家、不再回退的场景permanent: false规则会变为307 Temporary Redirect适合暂时转移的场景例如促销页临时指向活动页、未来还要切回原地址的情况。308 与 307 都保留了原始请求方法与请求体这与更常见的 301/302 不同因此在 POST 等带请求体的场景下语义更安全。当redirects()返回的规则需要调整时改完配置重启 dev server或重新构建即可生效。匹配规则与进阶参数除基础的source/destination/permanent之外按 Next.js 官方 API 约定redirects()还支持更精细的匹配能力可按需选用路径通配符source: /blog/:slug可匹配任意单段路径source: /docs/*可匹配多段路径捕获的参数可在destination中以:slug形式回填适合成批迁移的场景条件匹配has/missing可以基于请求头header、Cookiecookie、查询参数query等条件决定是否触发跳转适合 A/B 分流、按来源渠道跳转等复杂场景basePath/locale在配置了basePath或国际化时重定向匹配会自动叠加相关前缀无需在每条规则里重复书写。同时注意Next.js 官方约定中headers、redirects、rewrites三类配置存在固定检查顺序先headers再redirects最后rewrites。如果你的请求同时命中了多种配置需要依据该顺序预判最终行为。配置层重定向与运行时重定向的分工next.config.js里的redirects()属于声明式、全局、静态的重定向规则写死、匹配即跳转适合内容迁移这类URL 永久或长期变化的场景。但并非所有跳转都适合写进配置文件。仓库中的另一篇笔记 Redirect An Unauthorized User 展示了运行时、按业务逻辑触发的重定向Pages Router 时代在getServerSideProps中做鉴权判断后返回redirect响应对象export async function getServerSideProps(context) { const session await getServerAuthSession() const ability getAbility({user: session?.user}) if (!ability.can(create, Post)) { return { redirect: { destination: /posts, permanent: false, }, } } return { props: {}, } }App Router 下则更简洁直接在 Server Component 中调用next/navigation的redirect函数import { redirect } from next/navigation export default async function CreatePost() { const session await getServerAuthSession() const ability getAbility({user: session?.user}) if (!ability.can(create, Post)) { redirect(/posts) } // JSX follows return (...) }两类方案的分工建议URL 本身发生了迁移、需要全站统一兜底 → 用next.config.js的redirects()跳转依赖登录态、权限等运行时数据 → 用getServerSideProps返回redirect或next/navigation的redirect()。把两者结合使用才能覆盖完整的需求面。本地开发时验证重定向是否生效配置写好后无需部署即可本地验证。启动开发服务器npm run dev # 等价于 next dev默认监听 http://localhost:3000然后在另一个终端用curl -I只看响应头检查状态码与Locationcurl -I http://localhost:3000/blog/old-blog-post-name curl -I http://localhost:3000/store预期输出分别类似HTTP/1.1 308 Permanent Redirect Location: /blog/new-blog-post-nameHTTP/1.1 308 Permanent Redirect Location: https://store.example.com把规则的permanent改为false后重复上述请求状态码会变为307 Temporary Redirect。生产构建next build next start同样会应用这些规则因此本地开发与线上行为完全一致这正是本方案相对于vercel.json的核心价值。仓库内延伸阅读Define URL Redirects In The Next Config本文的原始出处笔记Add Web Server Layer Redirectsvercel.json方案对照阅读Redirect An Unauthorized User运行时重定向的两种写法README.mdTIL 仓库全量目录可检索更多 Next.js 相关笔记。赞分享文档教程知识库【免费下载链接】til:memo: Today I Learned项目地址https://gitcode.com/gh_mirrors/ti/til点击查看免费下载相关推荐微信聊天记录如何免费导出成文档并生成年度报告WeChatMsg 新手完整指南微信聊天记录如何免费导出成文档并生成年度报告WeChatMsg 新手完整指南 换了新手机把用了好几年的微信聊天记录往新设备上一迁中途断了一次几百条消息说Read the Docs 自定义 URL 重定向Redirects配置实战指南Read the Docs 自定义 URL 重定向Redirects配置实战指南 本篇指南讲解如何在 Read the Docs 项目中配置用户自定义重定向后端文档redirect-with-fallback 示例深度解析Next.js Route Handler 与 next.config.js redirects 双轨重定向方案redirect with fallback 示例深度解析Next.js Route Handler 与 next.config.js redirects 双示例工程前端后端上一篇SkillSpector蓝队防御AI Agent技能安全运营与事件响应完整指南下一篇IPTVnator免费跨平台IPTV播放器完整指南3步就能看起直播创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考 TIL · Next.js 重定向实战：在 next.config.js 中通过 redirects() 定义 URL 跳转（308 与 307）
文档教程知识库【免费下载链接】til:memo: Today I Learned项目地址https://gitcode.com/gh_mirrors/ti/til点击查看免费下载本篇整理 TIL 仓库中关于 Next.js 应用 URL 重定向的实践与其把重定向规则写在vercel.json里它只在 Vercel 部署层生效本地开发时毫无感知不如直接写进next.config.js的redirects()异步函数让next dev本地开发与线上部署行为完全一致。读完你可以掌握redirects()的完整配置写法、permanent字段对 308/307 状态码的控制逻辑以及如何在本地用curl快速验证跳转是否按预期生效。为什么要把重定向写进 next.config.js网站内容总会有迁移的时候博客文章改名、商品页换路径、旧域名跳新域名。人们早已把旧链接收藏起来或散布在互联网各处为了不破坏这些 URL就需要配置重定向规则。仓库中的姊妹篇 Add Web Server Layer Redirects 介绍了第一种做法把重定向写进项目根目录的vercel.json交给 Vercel 的 Web Server 层处理例如{ redirects: [ { source: blog/old-blog-post-name, destination: blog/new-blog-post-name }, { source: /store, destination: store.example.com } ] }第一条规则把站内某个路径重定向到同一域名下的另一个路径第二条规则把路径重定向到外部 URL。在 Vercel 平台上这些规则默认返回 308 状态码。但问题在于vercel.json是在部署时由 Vercel 平台解析的。当你本地运行next dev时这些规则根本不会被执行导致本地访问旧链接 404、部署后却跳转成功的割裂体验容易误导开发者尤其在调试阶段让人困惑。两种方案的对比对比维度vercel.jsonnext.config.js的redirects()生效层级Vercel 平台 Web Server 层Next.js 应用层dev server / 构建产物本地next dev是否生效否是状态码控制默认 308通过permanent显式控制 308 / 307配置格式JSONJavaScript支持逻辑与动态生成与框架耦合度依赖 Vercel 平台纯 Next.js可移植到任意托管环境因此把重定向下沉到next.config.js是让本地与线上行为保持一致的首选方式。在 next.config.js 中定义 redirects()Next.js 允许在next.config.js中通过redirects()异步函数声明重定向规则。当本地运行 Next dev server 时这些规则就会被处理并生效。一个完整可运行的最小示例比原笔记补充了module.exports导出并对路径规范做了修正// next.config.js const nextConfig { async redirects() { return [ { // 站内路径 → 站内路径旧博客文章搬到新地址 source: /blog/old-blog-post-name, destination: /blog/new-blog-post-name, permanent: true, }, { // 站内路径 → 外部 URL/store 跳转到独立商城站点 source: /store, destination: https://store.example.com, permanent: true, }, ]; }, }; module.exports nextConfig;规则对象的核心字段字段作用说明source匹配的请求路径建议以/开头按 Next.js 的路径匹配约定书写否则可能产生预期之外的匹配结果destination跳转目标站内路径建议同样带/外部地址则写完整 URL含协议与域名permanent是否永久重定向true产生 308false产生 307详见下一节几点实践要点redirects()是异步函数可以return静态数组也可以在内部做动态计算、按环境变量返回不同规则灵活性远高于静态 JSON。配置文件在较新版本中还支持next.config.mjsESM与next.config.tsTypeScript形态核心的redirects()API 保持一致。重定向规则按数组顺序逐一匹配第一个命中的规则生效因此更具体的规则应放在前面。redirects()属于框架层配置无论页面使用 Pages Router 还是 App Router请求匹配到source时都会执行跳转。提示原笔记示例中部分路径未带前导/且第二个规则对象缺少分隔逗号。上面给出的版本修正了这两处可直接复制运行。permanent: true → 308false → 307permanent是决定跳转语义的关键开关这也是原笔记最核心的结论permanent: true规则会被编译为308 Permanent Redirect告知客户端与搜索引擎该 URL 已永久迁移适合旧内容彻底搬家、不再回退的场景permanent: false规则会变为307 Temporary Redirect适合暂时转移的场景例如促销页临时指向活动页、未来还要切回原地址的情况。308 与 307 都保留了原始请求方法与请求体这与更常见的 301/302 不同因此在 POST 等带请求体的场景下语义更安全。当redirects()返回的规则需要调整时改完配置重启 dev server或重新构建即可生效。匹配规则与进阶参数除基础的source/destination/permanent之外按 Next.js 官方 API 约定redirects()还支持更精细的匹配能力可按需选用路径通配符source: /blog/:slug可匹配任意单段路径source: /docs/*可匹配多段路径捕获的参数可在destination中以:slug形式回填适合成批迁移的场景条件匹配has/missing可以基于请求头header、Cookiecookie、查询参数query等条件决定是否触发跳转适合 A/B 分流、按来源渠道跳转等复杂场景basePath/locale在配置了basePath或国际化时重定向匹配会自动叠加相关前缀无需在每条规则里重复书写。同时注意Next.js 官方约定中headers、redirects、rewrites三类配置存在固定检查顺序先headers再redirects最后rewrites。如果你的请求同时命中了多种配置需要依据该顺序预判最终行为。配置层重定向与运行时重定向的分工next.config.js里的redirects()属于声明式、全局、静态的重定向规则写死、匹配即跳转适合内容迁移这类URL 永久或长期变化的场景。但并非所有跳转都适合写进配置文件。仓库中的另一篇笔记 Redirect An Unauthorized User 展示了运行时、按业务逻辑触发的重定向Pages Router 时代在getServerSideProps中做鉴权判断后返回redirect响应对象export async function getServerSideProps(context) { const session await getServerAuthSession() const ability getAbility({user: session?.user}) if (!ability.can(create, Post)) { return { redirect: { destination: /posts, permanent: false, }, } } return { props: {}, } }App Router 下则更简洁直接在 Server Component 中调用next/navigation的redirect函数import { redirect } from next/navigation export default async function CreatePost() { const session await getServerAuthSession() const ability getAbility({user: session?.user}) if (!ability.can(create, Post)) { redirect(/posts) } // JSX follows return (...) }两类方案的分工建议URL 本身发生了迁移、需要全站统一兜底 → 用next.config.js的redirects()跳转依赖登录态、权限等运行时数据 → 用getServerSideProps返回redirect或next/navigation的redirect()。把两者结合使用才能覆盖完整的需求面。本地开发时验证重定向是否生效配置写好后无需部署即可本地验证。启动开发服务器npm run dev # 等价于 next dev默认监听 http://localhost:3000然后在另一个终端用curl -I只看响应头检查状态码与Locationcurl -I http://localhost:3000/blog/old-blog-post-name curl -I http://localhost:3000/store预期输出分别类似HTTP/1.1 308 Permanent Redirect Location: /blog/new-blog-post-nameHTTP/1.1 308 Permanent Redirect Location: https://store.example.com把规则的permanent改为false后重复上述请求状态码会变为307 Temporary Redirect。生产构建next build next start同样会应用这些规则因此本地开发与线上行为完全一致这正是本方案相对于vercel.json的核心价值。仓库内延伸阅读Define URL Redirects In The Next Config本文的原始出处笔记Add Web Server Layer Redirectsvercel.json方案对照阅读Redirect An Unauthorized User运行时重定向的两种写法README.mdTIL 仓库全量目录可检索更多 Next.js 相关笔记。赞分享文档教程知识库【免费下载链接】til:memo: Today I Learned项目地址https://gitcode.com/gh_mirrors/ti/til点击查看免费下载相关推荐微信聊天记录如何免费导出成文档并生成年度报告WeChatMsg 新手完整指南微信聊天记录如何免费导出成文档并生成年度报告WeChatMsg 新手完整指南 换了新手机把用了好几年的微信聊天记录往新设备上一迁中途断了一次几百条消息说Read the Docs 自定义 URL 重定向Redirects配置实战指南Read the Docs 自定义 URL 重定向Redirects配置实战指南 本篇指南讲解如何在 Read the Docs 项目中配置用户自定义重定向后端文档redirect-with-fallback 示例深度解析Next.js Route Handler 与 next.config.js redirects 双轨重定向方案redirect with fallback 示例深度解析Next.js Route Handler 与 next.config.js redirects 双示例工程前端后端上一篇SkillSpector蓝队防御AI Agent技能安全运营与事件响应完整指南下一篇IPTVnator免费跨平台IPTV播放器完整指南3步就能看起直播创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考