redirect

تسمح دالة redirect بإعادة توجيه المستخدم إلى عنوان URL آخر. يمكن استخدام redirect في مكونات الخادم (Server Components)، معالجات المسار (Route Handlers)، و أفعال الخادم (Server Actions).

عند استخدامها في سياق البث (streaming context)، تقوم بإدراج وسم meta لإصدار إعادة التوجيه على جانب العميل. عند استخدامها في فعل خادم، تقدم استجابة إعادة توجيه HTTP 303 للمتصل. وإلا، تقدم استجابة إعادة توجيه HTTP 307 للمتصل.

إذا كان المورد غير موجود، يمكنك استخدام دالة notFound بدلاً من ذلك.

معلومة مفيدة:

• في أفعال الخادم ومعالجات المسار، يجب استدعاء redirect بعد كتلة try/catch.
• إذا كنت تفضل إرجاع إعادة توجيه HTTP 308 (دائم) بدلاً من 307 (مؤقت)، يمكنك استخدام دالة permanentRedirect بدلاً من ذلك.

المعاملات

تقبل دالة redirect وسيطين:

redirect(path, type)

بشكل افتراضي، تستخدم redirect push (إضافة إدخال جديد إلى سجل المتصفح) في أفعال الخادم (Server Actions) و replace (استبدال عنوان URL الحالي في سجل المتصفح) في كل مكان آخر. يمكنك تجاوز هذا السلوك عن طريق تحديد معامل type.

لا يؤثر معامل type عند استخدامه في مكونات الخادم.

القيمة المرجعة

لا ترجع دالة redirect أي قيمة.

مثال

مكون الخادم

استدعاء دالة redirect() يرمي خطأ NEXT_REDIRECT ويوقف عرض جزء المسار الذي تم رميه فيه.

import { redirect } from 'next/navigation'

async function fetchTeam(id) {
  const res = await fetch('https://...')
  if (!res.ok) return undefined
  return res.json()
}

export default async function Profile({ params }) {
  const team = await fetchTeam(params.id)
  if (!team) {
    redirect('/login')
  }

  // ...
}

معلومة مفيدة: لا تتطلب redirect استخدام return redirect() لأنها تستخدم نوع TypeScript never.

مكون العميل

يمكن استخدام redirect في مكون العميل من خلال فعل خادم. إذا كنت بحاجة إلى استخدام معالج حدث لإعادة توجيه المستخدم، يمكنك استخدام خطاف useRouter.

'use client'

import { navigate } from './actions'

export function ClientRedirect() {
  return (
    <form action={navigate}>
      <input type="text" name="id" />
      <button>Submit</button>
    </form>
  )
}

'use client'

import { navigate } from './actions'

export function ClientRedirect() {
  return (
    <form action={navigate}>
      <input type="text" name="id" />
      <button>Submit</button>
    </form>
  )
}

'use server'

import { redirect } from 'next/navigation'

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

'use server'

import { redirect } from 'next/navigation'

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

الأسئلة الشائعة

لماذا تستخدم redirect الرموز 307 و 308؟

عند استخدام redirect() قد تلاحظ أن الرموز المستخدمة هي 307 لإعادة التوجيه المؤقتة و 308 لإعادة التوجيه الدائمة. بينما تقليديًا كان يستخدم 302 لإعادة التوجيه المؤقتة و 301 لإعادة التوجيه الدائمة، قامت العديد من المتصفحات بتغيير طريقة طلب إعادة التوجيه من POST إلى GET عند استخدام 302، بغض النظر عن طريقة الطلب الأصلية.

في المثال التالي لإعادة التوجيه من /users إلى /people، إذا قمت بعمل طلب POST إلى /users لإنشاء مستخدم جديد، وتمت مطابقة إعادة التوجيه المؤقتة 302، ستتغير طريقة الطلب من POST إلى GET. هذا غير منطقي، لأنه لإنشاء مستخدم جديد، يجب أن تقوم بعمل طلب POST إلى /people وليس طلب GET.

أدخل رمز الحالة 307 يعني الحفاظ على طريقة الطلب كـ POST.

• 302 - إعادة توجيه مؤقتة، ستغير طريقة الطلب من POST إلى GET
• 307 - إعادة توجيه مؤقتة، ستحافظ على طريقة الطلب كـ POST

تستخدم طريقة redirect() رمز 307 افتراضيًا، بدلاً من إعادة التوجيه المؤقتة 302، مما يعني أن طلباتك ستظل دائمًا كطلبات POST.

تعلم المزيد حول إعادة التوجيه HTTP.

سجل الإصدارات