redirect و refresh در Next.js — ریدایرکت‌های هوشمند و تازه‌سازی مسیر در Server Actions

۱. redirect چیست؟

redirect() تابعی است که کاربر را به مسیر جدید هدایت می‌کند. این تابع در Server و Client Components، Route Handlers و Server Actions قابل استفاده است.

پارامترها:

• path: مسیر مقصد (نسبی یا مطلق)
• type: نوع ریدایرکت ('replace' یا 'push')

رفتار:

• در Server Actions: پاسخ با وضعیت 303 ارسال می‌شود
• در سایر موارد: پاسخ با وضعیت 307 ارسال می‌شود
• در Client Component فقط در زمان رندر قابل استفاده است (نه در event handler)

مثال در Server Component:

import { redirect } from 'next/navigation'

const team = await fetchTeam(id)
if (!team) {
  redirect('/login')
}

مثال در Client Component:

'use client'
import { redirect, usePathname } from 'next/navigation'

export function ClientRedirect() {
  const pathname = usePathname()
  if (pathname.startsWith('/admin') && !pathname.includes('/login')) {
    redirect('/admin/login')
  }
  return <div>Login Page</div>
}

ریدایرکت از طریق Server Action:

// app/actions.ts
'use server'
import { redirect } from 'next/navigation'

export async function navigate(data: FormData) {
  redirect(`/posts/${data.get('id')}`)
}

۲. تفاوت وضعیت‌های HTTP در ریدایرکت

• 302: تغییر روش درخواست از POST به GET (نامناسب برای فرم‌ها)
• 307: حفظ روش درخواست (مناسب برای POST)
• 308: ریدایرکت دائمی با حفظ روش درخواست

۳. refresh چیست؟

refresh() تابعی است که فقط در Server Actions قابل استفاده است و باعث تازه‌سازی مسیر کلاینت می‌شود. این تابع هیچ مقداری باز نمی‌گرداند.

مثال:

// app/actions.ts
'use server'
import { refresh } from 'next/cache'

export async function createPost(formData: FormData) {
  const post = await db.post.create({
    data: {
      title: formData.get('title'),
      content: formData.get('content'),
    },
  })
  refresh()
}

نکته مهم:

استفاده از refresh() خارج از Server Action (مثلاً در Route Handler) باعث خطا می‌شود.

جمع‌بندی

تابع redirect() در Next.js امکان هدایت کاربر به مسیر جدید را با حفظ روش درخواست فراهم می‌کند. تابع refresh() نیز برای تازه‌سازی مسیر کلاینت پس از عملیات سروری استفاده می‌شود. این دو ابزار در کنار هم تجربه‌ای پویا و امن برای کاربران فراهم می‌کنند.