Lang x Lang

︙

Redirecting

いくつかの方法で、Next.js 内での redirects を管理することができます。このページでは、利用可能なオプション、使用例、そして大量の redirects をどのように管理するかについて順を追って説明します。

API目的場所状態 Code
redirectミューテーションまたはイベント後にユーザーを Redirect するServer Components 、 Server Actions 、 Route ハンドラ307(一時)または 303( Server Action )
permanentRedirectミューテーションまたはイベント後にユーザーを Redirect するServer Components , Server Actions , Route Handlers308 ( Permanent )
useRouterクライアントサイドのナビゲーションを実行するClient Components のイベントハンドラーN/A
next.config.jsの中のredirectsRedirect 入ってくる request を path に基づいて Redirect するnext.config.jsファイル307 (一時的) または 308( Permanent )
NextResponse.redirect条件に基づいて、入ってきた request を Redirect するMiddleware任意

redirect function

redirect 関数は、ユーザーを別の URL に redirect することができます。 この redirect 関数を Server Components、Route ハンドラー、そして Server Actions で呼び出すことができます。

redirect は、変異やイベントの後によく使用されます。例えば、post を作成する場合など：

app/actions.tsx
'use server'

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

export async function createPost(id: string) {
  try {
    // Call database
  } catch (error) {
    // Handle errors
  }

  revalidatePath('/posts') // Update cached posts
  redirect(`/post/${id}`) // Navigate to the new post page
}
app/actions.js
'use server'

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

export async function createPost(id) {
  try {
    // Call database
  } catch (error) {
    // Handle errors
  }

  revalidatePath('/posts') // Update cached posts
  redirect(`/post/${id}`) // Navigate to the new post page
}

Good to know:

  • redirectは default で 307（一時的 Redirect）のステータス code を返します。Server Action で使用される場合、303（他を参照）を返し、これは POST request の結果として成功ページに redirect するために一般的に使用されます。
  • redirectは内部でエラーを投げるため、try/catchブロックの外で呼び出すべきです。
  • redirectはレンダリングプロセス中の Client Components で呼び出すことができますが、イベントハンドラーでは呼び出すことができません。代わりに useRouter hook を使用できます。
  • redirectは絶対 URL も受け入れ、外部リンクに redirect するために使用することができます。
  • render プロセスの前に redirect したい場合は、next.config.js または Middleware を使用してください。

詳細は redirect API reference をご覧ください。

permanentRedirect function

permanentRedirect関数は、ユーザーを永久にredirect させて別の URL に移動させることができます。permanentRedirectは Server Components、Route Handlers、そしてServer Actions で呼び出す事が可能です。

permanentRedirect は、エンティティの正規の URL が変更されたミューテーションやイベントの後によく使用されます。例えば、ユーザーが自分のユーザー名を変更した後にユーザーのプロフィールの URL を更新する場合などです。

app/actions.ts
'use server'

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

export async function updateUsername(username: string, formData: FormData) {
  try {
    // Call database
  } catch (error) {
    // Handle errors
  }

  revalidateTag('username') // Update all references to the username
  permanentRedirect(`/profile/${username}`) // Navigate to the new user profile
}
app/actions.js
'use server'

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

export async function updateUsername(username, formData) {
  try {
    // Call database
  } catch (error) {
    // Handle errors
  }

  revalidateTag('username') // Update all references to the username
  permanentRedirect(`/profile/${username}`) // Navigate to the new user profile
}

Good to know:

  • permanentRedirect は、default で 308(permanent redirect)ステータスの code を返します。
  • permanentRedirect は絶対 URL も受け入れ、外部リンクへの redirect にも使用できます。
  • render プロセスの前に redirect したい場合は、next.config.js または Middleware を使用してください。

詳細については、permanentRedirect API reference をご覧ください。

useRouter() hook

もしイベントハンドラ内で、Client Component にて redirect する必要がある場合、useRouter hook から push method を使用できます。例えば：

app/page.tsx
'use client'

import { useRouter } from 'next/navigation'

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

  return (
    <button type="button" onClick={() => router.push('/dashboard')}>
      Dashboard
    </button>
  )
}
app/page.js
'use client'

import { useRouter } from 'next/navigation'

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

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

Good to know:

  • あなたがユーザーをプログラム的にナビゲートする必要がない場合、<Link> component を使用すべきです。

詳細については、useRouter API reference をご覧ください。

redirects in next.config.js

next.config.js ファイルの redirects オプションは、来た request path を別のデスティネーション path に redirects することができます。これはページの URL 構造を変更したり、事前に知られている redirects のリストがある場合に便利です。

redirects は path、header、cookie、そして query のマッチングをサポートし、着信 request に基づいてユーザーを redirect する柔軟性を提供します。

redirects を使用するには、オプションをあなたの next.config.js ファイルに追加してください:

next.config.js
module.exports = {
  async redirects() {
    return [
      // Basic redirect
      {
        source: '/about',
        destination: '/',
        permanent: true,
      },
      // Wildcard path matching
      {
        source: '/blog/:slug',
        destination: '/news/:slug',
        permanent: true,
      },
    ]
  },
}

詳細情報については、redirects API reference をご覧ください。

Good to know:

  • redirects は permanent オプションを使用して、307(一時的な Redirect )または 308( Permanent Redirect )のステータス code を返すことができます。
  • redirects はプラットフォームによっては制限があるかもしれません。例えば、Vercel では、 redirects の上限は 1,024 になります。 redirects の number (1000 以上) を管理するためには、Middleware を使用したカスタムソリューションを作成することを検討してください。詳細については、大規模な redirects の管理を参照してください。
  • redirectsは、Middleware の前に実行されます。

NextResponse.redirect in Middleware

Middleware は、request が完了する前に code を実行することを可能にします。それから、受け取った request に基づいて、 NextResponse.redirect を使用して異なる URL に redirect します。これは、条件(認証、セッション管理など)に基づいてユーザーを redirect させたい場合や、大量の redirects を持つ場合に便利です。

例えば、ユーザーが認証されていない場合、 /login ページに redirect すると：

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

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

  // If the user is authenticated, continue as normal
  if (isAuthenticated) {
    return NextResponse.next()
  }

  // Redirect to login page if not authenticated
  return NextResponse.redirect(new URL('/login', request.url))
}

export const config = {
  matcher: '/dashboard/:path*',
}
middleware.js
import { NextResponse } from 'next/server'
import { authenticate } from 'auth-provider'

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

  // If the user is authenticated, continue as normal
  if (isAuthenticated) {
    return NextResponse.next()
  }

  // Redirect to login page if not authenticated
  return NextResponse.redirect(new URL('/login', request.url))
}

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

Good to know:

  • Middleware は next.config.js の redirects の後に実行され、レンダリングの前に行われます。

詳細については、Middleware のドキュメンテーションを参照してください。

Managing redirects at scale (advanced)

大量の number の redirects(1000 以上) を管理するには、Middleware を使用してカスタムソリューションを作成することを検討してみてください。これにより、アプリケーションを再デプロイすることなく、redirects をプログラムで処理することができます。

これを行うためには、以下のことを考慮する必要があります：

  1. redirect map の作成と保存。
  2. データルックアップパフォーマンスの最適化。

Next.js の例：以下の推奨事項の実装については、私たちの Middleware とブルームフィルタ の例をご覧ください。

1. redirect マップの作成と保存

redirect map は、データベース(通常はキー-バリューストア)や JSON ファイルに保存できる redirects のリストです。

次のデータ構造を考慮してください：

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

Middleware では、Vercel の Edge Config や Redis などのデータベースから読み込み、入力された request に基づいてユーザーを redirect することができます。

middleware.ts
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)
  }

  // No redirect found, continue without redirecting
  return NextResponse.next()
}
middleware.js
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)
  }

  // No redirect found, continue without redirecting
  return NextResponse.next()
}

2. データルックアップパフォーマンスの最適化

大きなデータセットを一連の request ごとに読み込むことは、遅く、費用もかかることがあります。データルックアップのパフォーマンスを最適化するための 2 つの方法があります:

  • 高速な読み込みに最適化されたデータベースを使用してください。たとえば、Vercel Edge Config や Redis などです。
  • Bloom filter などの strategy を用いて、大きな redirects ファイルやデータベースを読む前に redirect が存在するか効率的に確認します。

前の例を考慮に入れると、生成されたブルームフィルタファイルを Middleware に import して、その後で、入ってくる request pathname がブルームフィルタに存在するかどうかを確認できます。

それがそうであれば、その request を Route Handler に転送します。これは実際のファイルをチェックし、ユーザーを適切な URL に redirect します。これにより、大規模な redirects ファイルを Middleware にインポートすることで、すべての受信 request が遅くなるのを防ぎます。

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

type RedirectEntry = {
  destination: string
  permanent: boolean
}

// Initialize bloom filter from a generated JSON file
const bloomFilter = ScalableBloomFilter.fromJSON(GeneratedBloomFilter as any)

export async function middleware(request: NextRequest) {
  // Get the path for the incoming request
  const pathname = request.nextUrl.pathname

  // Check if the path is in the bloom filter
  if (bloomFilter.has(pathname)) {
    // Forward the pathname to the Route Handler
    const api = new URL(
      `/api/redirects?pathname=${encodeURIComponent(request.nextUrl.pathname)}`,
      request.nextUrl.origin
    )

    try {
      // Fetch redirect data from the Route Handler
      const redirectData = await fetch(api)

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

        if (redirectEntry) {
          // Determine the status code
          const statusCode = redirectEntry.permanent ? 308 : 307

          // Redirect to the destination
          return NextResponse.redirect(redirectEntry.destination, statusCode)
        }
      }
    } catch (error) {
      console.error(error)
    }
  }

  // No redirect found, continue the request without redirecting
  return NextResponse.next()
}
middleware.js
import { NextResponse } from 'next/server'
import { ScalableBloomFilter } from 'bloom-filters'
import GeneratedBloomFilter from './redirects/bloom-filter.json'

// Initialize bloom filter from a generated JSON file
const bloomFilter = ScalableBloomFilter.fromJSON(GeneratedBloomFilter)

export async function middleware(request) {
  // Get the path for the incoming request
  const pathname = request.nextUrl.pathname

  // Check if the path is in the bloom filter
  if (bloomFilter.has(pathname)) {
    // Forward the pathname to the Route Handler
    const api = new URL(
      `/api/redirects?pathname=${encodeURIComponent(request.nextUrl.pathname)}`,
      request.nextUrl.origin
    )

    try {
      // Fetch redirect data from the Route Handler
      const redirectData = await fetch(api)

      if (redirectData.ok) {
        const redirectEntry = await redirectData.json()

        if (redirectEntry) {
          // Determine the status code
          const statusCode = redirectEntry.permanent ? 308 : 307

          // Redirect to the destination
          return NextResponse.redirect(redirectEntry.destination, statusCode)
        }
      }
    } catch (error) {
      console.error(error)
    }
  }

  // No redirect found, continue the request without redirecting
  return NextResponse.next()
}

それから、Route Handler の中で：

app/redirects/route.ts
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 })
  }

  // Get the redirect entry from the redirects.json file
  const redirect = (redirects as Record<string, RedirectEntry>)[pathname]

  // Account for bloom filter false positives
  if (!redirect) {
    return new Response('No redirect', { status: 400 })
  }

  // Return the redirect entry
  return NextResponse.json(redirect)
}
app/redirects/route.js
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 })
  }

  // Get the redirect entry from the redirects.json file
  const redirect = redirects[pathname]

  // Account for bloom filter false positives
  if (!redirect) {
    return new Response('No redirect', { status: 400 })
  }

  // Return the redirect entry
  return NextResponse.json(redirect)
}

Good to know：

  • ブルームフィルターを生成するには、bloom-filters のような library を使用できます。
  • あなたは、悪意のある Request を防ぐために、Route Handler に対して行われる Request を検証すべきです。

当社サイトでは、Cookie を使用しています。各規約をご確認の上ご利用ください:
Cookie Policy, Privacy Policy および Terms of Use