如何在 Next.js 中處理重新導向

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

API	用途	使用位置	狀態碼
`redirect`	在變更或事件後重新導向使用者	伺服器元件 (Server Components)、伺服器動作 (Server Actions)、路由處理器 (Route Handlers)	307 (臨時) 或 303 (伺服器動作)
`permanentRedirect`	在變更或事件後永久重新導向使用者	伺服器元件、伺服器動作、路由處理器	308 (永久)
`useRouter`	執行客戶端導航	客戶端元件 (Client Components) 的事件處理器	不適用
`redirects` in `next.config.js`	根據路徑重新導向傳入請求	`next.config.js` 檔案	307 (臨時) 或 308 (永久)
`NextResponse.redirect`	根據條件重新導向傳入請求	中介軟體 (Middleware)	任意

`redirect` 函式

redirect 函式允許您將使用者重新導向至另一個 URL。您可以在伺服器元件、路由處理器和伺服器動作中呼叫 redirect。

redirect 通常用於變更或事件之後。例如，建立一篇文章：

'use server'

import { redirect } from 'next/navigation'
import { revalidatePath } from 'next/cache'

export async function createPost(id: string) {
  try {
    // 呼叫資料庫
  } catch (error) {
    // 處理錯誤
  }

  revalidatePath('/posts') // 更新快取文章
  redirect(`/post/${id}`) // 導向至新文章頁面
}

須知事項:

redirect 預設返回 307 (臨時重新導向) 狀態碼。在伺服器動作中使用時，會返回 303 (查看其他)，通常用於在 POST 請求後重新導向至成功頁面。

redirect 內部會拋出錯誤，因此應在 try/catch 區塊外呼叫。

redirect 可以在客戶端元件的渲染過程中呼叫，但不能在事件處理器中使用。此時應改用 useRouter 鉤子。

redirect 也接受絕對 URL，可用於重新導向至外部連結。

若想在渲染過程前重新導向，請使用 next.config.js 或中介軟體。

詳見 redirect API 參考文件以獲取更多資訊。

`permanentRedirect` 函式

permanentRedirect 函式允許您永久將使用者重新導向至另一個 URL。您可以在伺服器元件、路由處理器和伺服器動作中呼叫 permanentRedirect。

permanentRedirect 通常用於變更實體標準 URL 的變更或事件後，例如在使用者變更使用者名稱後更新其個人資料 URL：

'use server'

import { permanentRedirect } from 'next/navigation'
import { revalidateTag } from 'next/cache'

export async function updateUsername(username: string, formData: FormData) {
  try {
    // 呼叫資料庫
  } catch (error) {
    // 處理錯誤
  }

  revalidateTag('username') // 更新所有使用者名稱參照
  permanentRedirect(`/profile/${username}`) // 導向至新使用者個人資料
}

須知事項:

permanentRedirect 預設返回 308 (永久重新導向) 狀態碼。

permanentRedirect 也接受絕對 URL，可用於重新導向至外部連結。

若想在渲染過程前重新導向，請使用 next.config.js 或中介軟體。

詳見 permanentRedirect API 參考文件以獲取更多資訊。

`useRouter()` 鉤子

若需要在客戶端元件的事件處理器中進行重新導向，可以使用 useRouter 鉤子的 push 方法。例如：

'use client'

import { useRouter } from 'next/navigation'

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 檔案：

import type { NextConfig } from 'next'

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

export default nextConfig

詳見 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. 優化資料查詢效能

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

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

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

如果存在，則將請求轉發至路由處理器 (Route Handler) ，該處理器會檢查實際檔案並將使用者重新導向至適當的 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

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

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

接著，在路由處理器中：

import { NextRequest, NextResponse } from 'next/server'
import redirects from '@/app/redirects/redirects.json'

type RedirectEntry = {
  destination: string
  permanent: boolean
}

export function GET(request: NextRequest) {
  const pathname = request.nextUrl.searchParams.get('pathname')
  if (!pathname) {
    return new Response('Bad Request', { status: 400 })
  }

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

  // 處理布隆過濾器的誤判情況
  if (!redirect) {
    return new Response('No redirect', { status: 400 })
  }

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

須知事項：

要生成布隆過濾器，您可以使用如 bloom-filters 的函式庫。

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

如何在 Next.js 中處理重新導向

`redirect` 函式

`permanentRedirect` 函式

`useRouter()` 鉤子

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

中介軟體中的 `NextResponse.redirect`

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

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

2. 優化資料查詢效能

redirect

permanentRedirect

中介軟體 (Middleware)

重新導向 (redirects)

On this page