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

重定向是一种服务器端指令,告诉浏览器从一个 URL 导航到另一个 URL。这通常会导致用户浏览器中的 URL 发生变化,并且浏览器会向目标 URL 发出新的请求。
首页 新闻资讯 行业资讯 Next.js 重写和重定向:深度解析

什么是重写和重定向?

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

0244ca838aca7597d4405012f54bf70feddc8f.webp

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

967c2b827cf5ce6bb7c7511af6f10686fdd445.png

在 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 模式的同时与外部服务集成时。