headers

تتيح لك وظيفة headers قراءة رؤوس طلب HTTP الواردة من مكون الخادم (Server Component).

headers()

هذه الواجهة تمتد من واجهة Web Headers API. وهي للقراءة فقط، مما يعني أنه لا يمكنك تعيين أو حذف رؤوس الطلب الصادرة.

import { headers } from 'next/headers'

export default function Page() {
  const headersList = headers()
  const referer = headersList.get('referer')

  return <div>Referer: {referer}</div>
}

import { headers } from 'next/headers'

export default function Page() {
  const headersList = headers()
  const referer = headersList.get('referer')

  return <div>Referer: {referer}</div>
}

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

• headers() هي وظيفة ديناميكية (Dynamic Function) لا يمكن معرفة قيمها المُرجعة مسبقًا. استخدامها في تخطيط أو صفحة سيؤدي إلى تحويل المسار إلى عرض ديناميكي (dynamic rendering) وقت الطلب.

مرجع API

const headersList = headers()

المعاملات

لا تأخذ headers أي معاملات.

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

تُرجع headers كائن Web Headers للقراءة فقط.

• Headers.entries(): تُرجع مكررًا (iterator) يسمح بالمرور عبر جميع أزواج المفتاح/القيمة في هذا الكائن.
• Headers.forEach(): تنفذ دالة معينة مرة واحدة لكل زوج مفتاح/قيمة في كائن Headers هذا.
• Headers.get(): تُرجع سلسلة نصية (String) تحتوي على جميع قيم رأس معين داخل كائن Headers.
• Headers.has(): تُرجع قيمة منطقية تشير إلى ما إذا كان كائن Headers يحتوي على رأس معين.
• Headers.keys(): تُرجع مكررًا (iterator) يسمح بالمرور عبر جميع مفاتيح أزواج المفتاح/القيمة في هذا الكائن.
• Headers.values(): تُرجع مكررًا (iterator) يسمح بالمرور عبر جميع قيم أزواج المفتاح/القيمة في هذا الكائن.

أمثلة

الاستخدام مع جلب البيانات

يمكن استخدام headers() مع Suspense لجلب البيانات (Suspense for Data Fetching).

import { Suspense } from 'react'
import { headers } from 'next/headers'

async function User() {
  const authorization = headers().get('authorization')
  const res = await fetch('...', {
    headers: { authorization }, // تمرير رأس التفويض
  })
  const user = await res.json()

  return <h1>{user.name}</h1>
}

export default function Page() {
  return (
    <Suspense fallback={null}>
      <User />
    </Suspense>
  )
}

عنوان IP

يمكن استخدام headers() للحصول على عنوان IP الخاص بالعميل.

import { Suspense } from 'react'
import { headers } from 'next/headers'

function IP() {
  const FALLBACK_IP_ADDRESS = '0.0.0.0'
  const forwardedFor = headers().get('x-forwarded-for')

  if (forwardedFor) {
    return forwardedFor.split(',')[0] ?? FALLBACK_IP_ADDRESS
  }

  return headers().get('x-real-ip') ?? FALLBACK_IP_ADDRESS
}

export default function Page() {
  return (
    <Suspense fallback={null}>
      <IP />
    </Suspense>
  )
}

بالإضافة إلى x-forwarded-for، يمكن لـ headers() قراءة:

• x-real-ip
• x-forwarded-host
• x-forwarded-port
• x-forwarded-proto

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