Lang x Lang

︙

Redirecting

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

API目的場所Code の状態
useRouterクライアントサイドナビゲーションを実行するコンポーネントN/A
next.config.jsの中のredirectspath に基づいて受信した request を Redirect するnext.config.jsファイル307(一時的)または 308( Permanent )
NextResponse.redirect条件に基づいて来た request を Redirect するMiddleware任意

useRouter() hook

もしあなたが component の中で redirect を必要とするなら、useRouterの hook からpushの method を使用することができます。例えば：

app/page.tsx
import { useRouter } from 'next/router'

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

  return (
    <button type="button" onClick={() => router.push('/dashboard')}>
      Dashboard
    </button>
  )
}
app/page.js
import { useRouter } from 'next/router'

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 を API Routes に転送します。これは実際のファイルをチェックし、ユーザーを適切な 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()
}

その後、API Route で：

pages/api/redirects.ts
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' })
  }

  // 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 res.status(400).json({ message: 'No redirect' })
  }

  // Return the redirect entry
  return res.json(redirect)
}
pages/api/redirects.js
import redirects from '@/app/redirects/redirects.json'

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

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

  // Account for bloom filter false positives
  if (!redirect) {
    return res.status(400).json({ message: 'No redirect' })
  }

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

Good to know：

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

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