مدیریت ریدایرکت‌ها در Next.js – از ریدایرکت ساده تا مقیاس‌پذیر با Proxy

انواع ریدایرکت در Next.js

API	کاربرد	محل استفاده	کد وضعیت
redirect	ریدایرکت بعد از رویداد یا تغییر	کامپوننت سرور، Server Action، Route Handler	307 یا 303
permanentRedirect	ریدایرکت دائمی بعد از تغییر URL	کامپوننت سرور، Server Action، Route Handler	308
useRouter	ناوبری سمت کلاینت	کامپوننت کلاینت	ندارد
redirects در next.config.js	ریدایرکت بر اساس مسیر ورودی	فایل پیکربندی	307 یا 308
NextResponse.redirect	ریدایرکت شرطی قبل از پاسخ	Proxy	دلخواه

استفاده از redirect

برای ریدایرکت بعد از ایجاد یا تغییر داده:

'use server'

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

export async function createPost(id: string) {
  revalidatePath('/posts')
  redirect(`/post/${id}`)
}

در Server Action، کد 303 ارسال می‌شود. توجه: redirect یک خطا پرتاب می‌کند و باید خارج از try/catch استفاده شود.

استفاده از permanentRedirect

برای ریدایرکت دائمی بعد از تغییر مسیر اصلی:

'use server'

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

export async function updateUsername(username: string) {
  revalidateTag('username')
  permanentRedirect(`/profile/${username}`)
}

استفاده از useRouter در کلاینت

برای ناوبری در رویدادهای کلاینت:

'use client'

import { useRouter } from 'next/navigation'

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

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

ریدایرکت در next.config.js

برای ریدایرکت‌های از پیش تعریف‌شده:

export async function redirects() {
  return [
    { source: '/about', destination: '/', permanent: true },
    { source: '/blog/:slug', destination: '/news/:slug', permanent: true },
  ]
}

مناسب برای تغییر ساختار URL یا مهاجرت مسیرها. محدودیت: در Vercel حداکثر 1024 ریدایرکت.

ریدایرکت شرطی با Proxy

برای ریدایرکت بر اساس وضعیت احراز هویت یا شرایط خاص:

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

export function proxy(request: NextRequest) {
  if (!authenticate(request)) {
    return NextResponse.redirect(new URL('/login', request.url))
  }
  return NextResponse.next()
}

مدیریت ریدایرکت‌های حجیم با Map

ذخیره مسیرها در JSON یا پایگاه داده:

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

خواندن مسیر از Edge Config یا Redis و ریدایرکت بر اساس آن.

بهینه‌سازی با Bloom Filter

برای بررسی سریع وجود مسیر در لیست ریدایرکت:

• استفاده از Bloom Filter برای بررسی اولیه
• در صورت وجود، واکشی داده از Route Handler
• ارسال ریدایرکت با کد مناسب

جمع‌بندی

Next.js ابزارهای متنوعی برای مدیریت ریدایرکت‌ها ارائه می‌دهد — از ریدایرکت ساده تا راهکارهای مقیاس‌پذیر با Proxy و Bloom Filter. با انتخاب روش مناسب، می‌توانید تجربه کاربری روان، امن و قابل نگهداری بسازید.