پراکسی در Next.js – بازنویسی، ریدایرکت و کنترل هدر قبل از تکمیل درخواست

پراکسی در Next.js چیست؟

پراکسی در Next.js به شما اجازه می‌دهد قبل از تکمیل درخواست، منطق دلخواه اجرا کنید. می‌توانید درخواست ورودی را بررسی کرده و پاسخ را با ریدایرکت، بازنویسی مسیر، تغییر هدرها یا پاسخ مستقیم تغییر دهید. این قابلیت برای کنترل مسیر، تست A/B و مدیریت هدرها بسیار مفید است.

موارد استفاده رایج

• ریدایرکت: هدایت سریع کاربران بر اساس کوکی یا پارامترهای درخواست
• بازنویسی مسیر: هدایت کاربران به صفحات مختلف برای تست یا ویژگی‌های خاص
• کنترل هدر: افزودن یا تغییر هدرها برای مسیرهای خاص یا کل سایت

موارد نامناسب برای پراکسی

پراکسی برای موارد زیر مناسب نیست:

• دریافت داده‌های کند یا سنگین
• مدیریت نشست (session)

نکته: استفاده از fetch با گزینه‌های cache، next.revalidate یا next.tags در پراکسی بی‌اثر است.

ساختار فایل proxy.ts

فایل proxy.ts را در ریشهٔ پروژه یا داخل پوشهٔ src ایجاد کنید (در کنار پوشه‌های pages یا app). فقط یک فایل پراکسی در هر پروژه پشتیبانی می‌شود.

برای سازمان‌دهی بهتر، می‌توانید منطق پراکسی را در فایل‌های جداگانه بنویسید و در proxy.ts وارد کنید. این کار باعث تمرکز کنترل و جلوگیری از تداخل لایه‌های پراکسی می‌شود.

مثال: ریدایرکت از /about به /home

// proxy.ts
import { NextResponse } from 'next/server'
import type { NextRequest } from 'next/server'

export function proxy(request: NextRequest) {
  return NextResponse.redirect(new URL('/home', request.url))
}

export const config = {
  matcher: '/about/:path*',
}

در این مثال، هر درخواستی به مسیر /about یا زیرمسیرهای آن به /home هدایت می‌شود. می‌توانید matcher را برای مسیرهای دلخواه تنظیم کنید.

پیکربندی مسیرها

ویژگی matcher مشخص می‌کند پراکسی روی کدام مسیرها اعمال شود. می‌توانید از الگوهایی مانند :path* برای پوشش مسیرهای تو در تو استفاده کنید.

جمع‌بندی

پراکسی در Next.js ابزاری قدرتمند برای کنترل سطح پایین درخواست‌هاست. چه بخواهید کاربران را ریدایرکت کنید، مسیرها را بازنویسی کنید یا هدرها را تغییر دهید، فایل proxy.ts امکان مدیریت متمرکز و سریع را فراهم می‌کند.