Next.js 重写和重定向：深度解析

• CSS技巧与案例详解
• vue2与vue3技巧合集
• VueUse源码解读

什么是重写和重定向？

重定向：重定向是一种服务器端指令，告诉浏览器从一个 URL 导航到另一个 URL。这通常会导致用户浏览器中的 URL 发生变化，并且浏览器会向目标 URL 发出新的请求。重定向通常用于 URL 重构、内容移动或确保 SEO 友好的 URL。

重写：重写是一种服务器端操作，它将传入的请求路径映射到不同的目标路径，同时不改变浏览器中的 URL。重写适用于在同一 URL 下提供不同内容、隐藏文件路径的复杂性，或将传统系统集成到现代架构中。

在 Next.js 中实现重定向
在 Next.js 中，配置重定向非常简单。你可以在 next.config.js 文件中定义重定向。典型的配置如下：

module.exports = {
  async redirects() {
    return [
      {
        source: '/old-path',
        destination: '/new-path',
        permanent: true, // 指示重定向是永久的（301）还是临时的（302）
      },
      {
        source: '/blog/:slug',
        destination: '/news/:slug',
        permanent: false,
      },
    ];
  },
};

• 从 /old-path 到 /new-path 的永久重定向。永久重定向（HTTP 状态码 301）向搜索引擎表明旧 URL 已被新 URL 替换，有助于保持 SEO 排名。
• 从 /blog/:slug 到 /news/:slug 的临时重定向。临时重定向（HTTP 状态码 302）用于移动不是永久的情况，搜索引擎应继续索引旧 URL。

在 Next.js 中实现重写
重写也在 next.config.js 文件中定义。

module.exports = {
  async rewrites() {
    return [
      {
        source: '/about-us',
        destination: '/company/about',
      },
      {
        source: '/product/:id',
        destination: '/api/product-details?id=:id',
      },
    ];
  },
};

• 第一个重写将 /about-us 路径映射到 /company/about，同时不改变用户浏览器中的 URL。这使你可以保持用户友好的 URL，同时以适合应用程序架构的方式组织内容。
• 第二个重写将来自 /product/:id 的请求路由到 API 端点 /api/product-details，并带有 id 参数。当将 Next.js 与后端服务或外部 API 集成时，这特别有用。

何时使用重定向与重写
选择重定向还是重写取决于你的具体用例：

• 使用重定向：当你需要更改用户浏览器中的 URL，尤其是在重构网站内容或改进 SEO 时。当你希望告知搜索引擎页面已永久移动时，重定向也至关重要。
• 使用重写：当你想在特定 URL 下提供内容而不暴露底层结构，或者需要在保持一致的 URL 模式的同时与外部服务集成时。

首发于公众号 大迁世界，欢迎关注。📝 每周一篇实用的前端文章 🛠️ 分享值得关注的开发工具 ❓ 有疑问？我来回答

本文 GitHub https://github.com/qq449245884/xiaozhi 已收录，有一线大厂面试完整考点、资料以及我的系列文章。