什么是重寫(xiě)和重定向？

重定向：重定向是一種服務(wù)器端指令，告訴瀏覽器從一個(gè) URL 導(dǎo)航到另一個(gè) URL。這通常會(huì)導(dǎo)致用戶瀏覽器中的 URL 發(fā)生變化，并且瀏覽器會(huì)向目標(biāo) URL 發(fā)出新的請(qǐng)求。重定向通常用于 URL 重構(gòu)、內(nèi)容移動(dòng)或確保 SEO 友好的 URL。

重寫(xiě)：重寫(xiě)是一種服務(wù)器端操作，它將傳入的請(qǐng)求路徑映射到不同的目標(biāo)路徑，同時(shí)不改變?yōu)g覽器中的 URL。重寫(xiě)適用于在同一 URL 下提供不同內(nèi)容、隱藏文件路徑的復(fù)雜性，或?qū)鹘y(tǒng)系統(tǒng)集成到現(xiàn)代架構(gòu)中。

在 Next.js 中實(shí)現(xiàn)重定向

在 Next.js 中，配置重定向非常簡(jiǎn)單。你可以在 next.config.js 文件中定義重定向。典型的配置如下：

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

• 從 /old-path 到 /new-path 的永久重定向。永久重定向（HTTP 狀態(tài)碼 301）向搜索引擎表明舊 URL 已被新 URL 替換，有助于保持 SEO 排名。
• 從 /blog/:slug 到 /news/:slug 的臨時(shí)重定向。臨時(shí)重定向（HTTP 狀態(tài)碼 302）用于移動(dòng)不是永久的情況，搜索引擎應(yīng)繼續(xù)索引舊 URL。

在 Next.js 中實(shí)現(xiàn)重寫(xiě)重寫(xiě)也在 next.config.js 文件中定義。

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

• 第一個(gè)重寫(xiě)將 /about-us 路徑映射到 /company/about，同時(shí)不改變用戶瀏覽器中的 URL。這使你可以保持用戶友好的 URL，同時(shí)以適合應(yīng)用程序架構(gòu)的方式組織內(nèi)容。
• 第二個(gè)重寫(xiě)將來(lái)自 /product/:id 的請(qǐng)求路由到 API 端點(diǎn) /api/product-details，并帶有 id 參數(shù)。當(dāng)將 Next.js 與后端服務(wù)或外部 API 集成時(shí)，這特別有用。

何時(shí)使用重定向與重寫(xiě)

選擇重定向還是重寫(xiě)取決于你的具體用例：

• 使用重定向：當(dāng)你需要更改用戶瀏覽器中的 URL，尤其是在重構(gòu)網(wǎng)站內(nèi)容或改進(jìn) SEO 時(shí)。當(dāng)你希望告知搜索引擎頁(yè)面已永久移動(dòng)時(shí)，重定向也至關(guān)重要。
• 使用重寫(xiě)：當(dāng)你想在特定 URL 下提供內(nèi)容而不暴露底層結(jié)構(gòu)，或者需要在保持一致的 URL 模式的同時(shí)與外部服務(wù)集成時(shí)。