۱. خواندن هدرهای 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 می‌شود.