headers، ImageResponse، notFound و permanentRedirect در Next.js — مدیریت درخواست‌ها، تولید تصویر، خطا و ریدایرکت

۱. خواندن هدرهای HTTP با headers()

headers() تابعی async است که در Server Components برای خواندن هدرهای ورودی HTTP استفاده می‌شود. خروجی آن یک آبجکت Web Headers فقط‌خواندنی است.

مثال:

import { headers } from 'next/headers'

export default async function Page() {
  const headersList = await headers()
  const userAgent = headersList.get('user-agent')
}

متدهای رایج:

get(name): دریافت مقدار یک هدر
has(name): بررسی وجود هدر
entries(): پیمایش کلید/مقدارها

۲. تولید تصویر داینامیک با ImageResponse

ImageResponse برای تولید تصاویر Open Graph، کارت‌های توییتر و سایر تصاویر اجتماعی با استفاده از JSX و CSS استفاده می‌شود.

مثال ساده:

return new ImageResponse(
  <div style={{ fontSize: 60 }}>Welcome</div>,
  { width: 1200, height: 630 }
)

ویژگی‌های پشتیبانی‌شده:

Flexbox و موقعیت‌دهی مطلق
فونت‌های سفارشی (ttf، otf، woff)
حداکثر حجم bundle: 500KB

مثال با فونت سفارشی:

const fontData = await readFile(join(process.cwd(), 'assets/Inter-SemiBold.ttf'))

return new ImageResponse(
  <div>My site</div>,
  {
    width: 1200,
    height: 630,
    fonts: [{ name: 'Inter', data: fontData, style: 'normal', weight: 400 }],
  }
)

۳. نمایش صفحه خطای 404 با notFound()

notFound() تابعی است که رندر segment جاری را متوقف کرده و صفحه not-found را نمایش می‌دهد. همچنین متا تگ noindex را به <head> اضافه می‌کند.

مثال:

import { notFound } from 'next/navigation'

const user = await fetchUser(id)
if (!user) {
  notFound()
}

۴. ریدایرکت دائمی با permanentRedirect()

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

مثال:

import { permanentRedirect } from 'next/navigation'

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

پارامترها:

path: مسیر مقصد
type: 'replace' یا 'push' (اختیاری)

جمع‌بندی

تابع headers برای خواندن اطلاعات درخواست، ImageResponse برای تولید تصاویر، notFound برای مدیریت خطا، و permanentRedirect برای هدایت کاربر ابزارهایی حیاتی در Next.js هستند. استفاده درست از این توابع باعث بهبود تجربه کاربری، امنیت و SEO می‌شود.