logoNext.js 繁體中文
文件部落格學習
介紹/指南/重新導向

如何在 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}`) // 導向至新文章頁面
}
'use server'

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

export async function createPost(id) {
  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}`) // 導向至新使用者個人資料
}
'use server'

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

export async function updateUsername(username, 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>
  )
}
'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
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*',
}
import { NextResponse } from 'next/server'
import { authenticate } from 'auth-provider'

export function middleware(request) {
  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+)，您可以考慮使用中介軟體建立自訂解決方案。這讓您能夠以程式方式處理重新導向，而無需重新部署應用程式。

為此，您需要考慮：

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

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()
}
import { NextResponse } from 'next/server'
import { get } from '@vercel/edge-config'

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

  if (redirectData) {
    const 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 { NextResponse } from 'next/server'
import { ScalableBloomFilter } from 'bloom-filters'
import GeneratedBloomFilter from './redirects/bloom-filter.json'

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

export async function middleware(request) {
  // 取得傳入請求的路徑
  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 = 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)
}
import { NextResponse } from 'next/server'
import redirects from '@/app/redirects/redirects.json'

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

  // 從 redirects.json 檔案取得重新導向項目
  const redirect = redirects[pathname]

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

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

須知事項：

  • 要生成布隆過濾器，您可以使用如 bloom-filters 的函式庫。
  • 您應該驗證發送至路由處理器的請求，以防止惡意請求。

redirect

redirect 函數的 API 參考文檔

permanentRedirect

關於 `permanentRedirect` 函式的 API 參考文件。

中介軟體 (Middleware)

學習如何使用中介軟體 (Middleware) 在請求完成前執行程式碼。

重新導向 (redirects)

為您的 Next.js 應用程式新增重新導向功能。

PWA

學習如何使用 Next.js 建構漸進式網路應用程式 (Progressive Web Application, PWA)。

Sass

使用 Sass 來為您的 Next.js 應用程式設定樣式。