重新導向 (Redirecting)

在 Next.js 中有幾種處理重新導向的方法。本頁將介紹每種可用選項、使用情境，以及如何管理大量重新導向。

API	用途	使用位置	狀態碼
`useRouter`	執行客戶端導航	元件	不適用
`redirects` in `next.config.js`	根據路徑重新導向傳入請求	`next.config.js` 檔案	307 (暫時) 或 308 (永久)
`NextResponse.redirect`	根據條件重新導向傳入請求	中介軟體	任意

`useRouter()` 鉤子

若需在元件中進行重新導向，可以使用 useRouter 鉤子的 push 方法。例如：

import { useRouter } from 'next/router'

export default function Page() {
  const router = useRouter()

  return (
    <button type="button" onClick={() => router.push('/dashboard')}>
      儀表板
    </button>
  )
}

須知事項:

若無需以程式方式導向使用者，應使用 <Link> 元件。

詳見 useRouter API 參考文件。

`next.config.js` 中的 `redirects`

next.config.js 檔案中的 redirects 選項允許您將傳入請求路徑重新導向至不同目標路徑。這在變更頁面 URL 結構或需預先設定大量重新導向時非常有用。

redirects 支援路徑、標頭、Cookie 和查詢匹配，讓您能根據傳入請求靈活重新導向使用者。

要使用 redirects，請在 next.config.js 檔案中加入此選項：

next.config.js

module.exports = {
  async redirects() {
    return [
      // 基本重新導向
      {
        source: '/about',
        destination: '/',
        permanent: true,
      },
      // 萬用字元路徑匹配
      {
        source: '/blog/:slug',
        destination: '/news/:slug',
        permanent: true,
      },
    ]
  },
}

詳見 redirects API 參考文件。

須知事項:

redirects 可透過 permanent 選項返回 307 (暫時重新導向) 或 308 (永久重新導向) 狀態碼。

在某些平台上，redirects 可能有數量限制。例如在 Vercel 上最多 1,024 個重新導向。若要管理大量重新導向 (1000+)，可考慮使用中介軟體建立自訂解決方案。詳見大規模管理重新導向。

redirects 執行於中介軟體之前。

中介軟體中的 `NextResponse.redirect`

中介軟體允許您在請求完成前執行程式碼。然後根據傳入請求，使用 NextResponse.redirect 重新導向至不同 URL。這在需根據條件 (例如驗證、會話管理等) 重新導向使用者或需大規模管理重新導向時非常有用。

例如，若使用者未通過驗證，則將其重新導向至 /login 頁面：

import { NextResponse, NextRequest } from 'next/server'
import { authenticate } from 'auth-provider'

export function middleware(request: NextRequest) {
  const isAuthenticated = authenticate(request)

  // 若使用者已通過驗證，繼續正常流程
  if (isAuthenticated) {
    return NextResponse.next()
  }

  // 若未通過驗證，導向至登入頁面
  return NextResponse.redirect(new URL('/login', request.url))
}

export const config = {
  matcher: '/dashboard/:path*',
}

須知事項:

中介軟體執行於 next.config.js 中的 redirects 之後，渲染之前。

詳見中介軟體文件。

大規模管理重新導向 (進階)

若要管理大量重新導向 (1000+)，可考慮使用中介軟體建立自訂解決方案。這樣無需重新部署應用程式即可程式化處理重新導向。

為此，您需要考慮：

建立並儲存重新導向映射表。
優化資料查詢效能。

Next.js 範例：請參閱我們的使用 Bloom 過濾器的中介軟體範例，了解以下建議的實作方式。

1. 建立並儲存重新導向映射表

重新導向映射表是您可以儲存在資料庫 (通常是鍵值儲存) 或 JSON 檔案中的重新導向清單。

考慮以下資料結構：

{
  "/old": {
    "destination": "/new",
    "permanent": true
  },
  "/blog/post-old": {
    "destination": "/blog/post-new",
    "permanent": true
  }
}

在中介軟體中，您可以從 Vercel 的邊緣設定 (Edge Config) 或 Redis 等資料庫讀取資料，並根據傳入請求重新導向使用者：

import { NextResponse, NextRequest } from 'next/server'
import { get } from '@vercel/edge-config'

type RedirectEntry = {
  destination: string
  permanent: boolean
}

export async function middleware(request: NextRequest) {
  const pathname = request.nextUrl.pathname
  const redirectData = await get(pathname)

  if (redirectData && typeof redirectData === 'string') {
    const redirectEntry: RedirectEntry = JSON.parse(redirectData)
    const statusCode = redirectEntry.permanent ? 308 : 307
    return NextResponse.redirect(redirectEntry.destination, statusCode)
  }

  // 未找到重新導向，繼續不進行導向
  return NextResponse.next()
}

2. 優化資料查詢效能

針對每個傳入的請求讀取大型資料集可能會很慢且耗費資源。以下是兩種優化資料查詢效能的方法：

使用針對快速讀取優化的資料庫，例如 Vercel Edge Config 或 Redis。
使用資料查詢策略，例如布隆過濾器 (Bloom filter)，在讀取較大的重新導向檔案或資料庫之前，有效率地檢查是否存在重新導向。

延續先前的範例，你可以將生成的布隆過濾器檔案匯入中介軟體 (Middleware)，然後檢查傳入的請求路徑名稱是否存在於布隆過濾器中。

如果存在，則將請求轉發給 API 路由 (API Routes)，該處理器會檢查實際檔案並將使用者重新導向至適當的 URL。這樣可以避免將大型重新導向檔案匯入中介軟體，從而減慢每個傳入請求的速度。

import { NextResponse, NextRequest } from 'next/server'
import { ScalableBloomFilter } from 'bloom-filters'
import GeneratedBloomFilter from './redirects/bloom-filter.json'

type RedirectEntry = {
  destination: string
  permanent: boolean
}

// 從生成的 JSON 檔案初始化布隆過濾器
const bloomFilter = ScalableBloomFilter.fromJSON(GeneratedBloomFilter as any)

export async function middleware(request: NextRequest) {
  // 取得傳入請求的路徑
  const pathname = request.nextUrl.pathname

  // 檢查路徑是否存在於布隆過濾器中
  if (bloomFilter.has(pathname)) {
    // 將路徑名稱轉發給路由處理器
    const api = new URL(
      `/api/redirects?pathname=${encodeURIComponent(request.nextUrl.pathname)}`,
      request.nextUrl.origin
    )

    try {
      // 從路由處理器取得重新導向資料
      const redirectData = await fetch(api)

      if (redirectData.ok) {
        const redirectEntry: RedirectEntry | undefined =
          await redirectData.json()

        if (redirectEntry) {
          // 決定狀態碼
          const statusCode = redirectEntry.permanent ? 308 : 307

          // 重新導向至目的地
          return NextResponse.redirect(redirectEntry.destination, statusCode)
        }
      }
    } catch (error) {
      console.error(error)
    }
  }

  // 未找到重新導向，繼續處理請求而不重新導向
  return NextResponse.next()
}

接著，在 API 路由中：

import { NextApiRequest, NextApiResponse } from 'next'
import redirects from '@/app/redirects/redirects.json'

type RedirectEntry = {
  destination: string
  permanent: boolean
}

export default function handler(req: NextApiRequest, res: NextApiResponse) {
  const pathname = req.query.pathname
  if (!pathname) {
    return res.status(400).json({ message: 'Bad Request' })
  }

  // 從 redirects.json 檔案取得重新導向項目
  const redirect = (redirects as Record<string, RedirectEntry>)[pathname]

  // 處理布隆過濾器的誤判情況
  if (!redirect) {
    return res.status(400).json({ message: 'No redirect' })
  }

  // 回傳重新導向項目
  return res.json(redirect)
}

須知事項：

若要生成布隆過濾器，可以使用 bloom-filters 這類函式庫。

你應該驗證發送到路由處理器的請求，以防止惡意請求。

useRouter() 鉤子

next.config.js 中的 redirects