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

文化   2024-12-19 20:39   新加坡  

什么是重写和重定向?

重定向:重定向是一种服务器端指令,告诉浏览器从一个 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 模式的同时与外部服务集成时。


最后:
React Hook 深入浅出
CSS技巧与案例详解
vue2与vue3技巧合集
VueUse源码解读



大迁世界
掘金LV8,思否10万+的作者。一个热爱前端的创业者。
 最新文章