پراکسی در next js

نکته: از نسخه Next.js 16 به بعد، Middleware به Proxy تغییر نام داده است تا هدف واقعی آن بهتر منعکس شود. با این حال، عملکرد آن کاملاً همانند گذشته باقی مانده است.

Proxy به شما این امکان را می‌دهد که پیش از تکمیل شدن یک درخواست (Request)، کد دلخواه خود را اجرا کنید. سپس، بر اساس درخواست ورودی، می‌توانید پاسخ را تغییر دهید؛ برای مثال با بازنویسی مسیر (Rewrite)، تغییر مسیر (Redirect)، ویرایش هدرهای درخواست یا پاسخ یا حتی ارسال مستقیم یک پاسخ.

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

برخی از رایج‌ترین کاربردهای Proxy عبارت‌اند از:

• تغییر هدرها برای تمام صفحات یا مجموعه‌ای از صفحات
• بازنویسی درخواست‌ها به صفحات مختلف بر اساس تست‌های A/B یا سایر آزمایش‌ها
• انجام Redirect به‌صورت برنامه‌نویسی بر اساس ویژگی‌های درخواست ورودی

اگر تنها به Redirectهای ساده نیاز دارید، بهتر است ابتدا از تنظیمات redirects در فایل next.config.ts استفاده کنید. Proxy زمانی مناسب است که به داده‌های درخواست (Request) یا منطق پیچیده‌تری نیاز داشته باشید.

Proxy برای انجام عملیات کند مانند واکشی داده‌ها (Slow Data Fetching) طراحی نشده است. هرچند می‌توان از آن برای بررسی‌های خوش‌بینانه (Optimistic Checks) مانند هدایت کاربران بر اساس سطح دسترسی استفاده کرد، اما نباید از آن به‌عنوان یک راهکار کامل برای مدیریت نشست (Session Management) یا احراز مجوز (Authorization) استفاده شود.

همچنین استفاده از fetch همراه با گزینه‌های options.cache، options.next.revalidate یا options.next.tags در Proxy هیچ تأثیری ندارد.

قرارداد (Convention)

یک فایل proxy.ts (یا proxy.js) در ریشه پروژه ایجاد کنید؛ یا اگر پروژه شما از پوشه src استفاده می‌کند، آن را داخل src قرار دهید تا در همان سطح پوشه‌های pages یا app باشد.

توجه: هر پروژه تنها از یک فایل proxy.ts پشتیبانی می‌کند، اما همچنان می‌توانید منطق Proxy را به چندین ماژول تقسیم کنید. قابلیت‌های مختلف Proxy را در فایل‌های جداگانه .ts یا .js پیاده‌سازی کرده و آن‌ها را در فایل اصلی proxy.ts وارد (Import) کنید. این روش باعث مدیریت تمیزتر Proxyهای مربوط به مسیرهای مختلف می‌شود، در حالی که کنترل مرکزی همچنان در فایل proxy.ts حفظ خواهد شد. محدود کردن پروژه به یک فایل Proxy باعث ساده‌تر شدن پیکربندی، جلوگیری از تداخل‌های احتمالی و بهبود عملکرد از طریق جلوگیری از ایجاد چندین لایه Proxy می‌شود.

مثال

می‌توانید تابع Proxy را به‌صورت Export پیش‌فرض (Default Export) یا Export نام‌گذاری‌شده با نام proxy صادر کنید.

TypeScript

import { NextResponse } from 'next/server'
import type { NextRequest } from 'next/server'
 
// This function can be marked `async` if using `await` inside
export function proxy(request: NextRequest) {
  return NextResponse.redirect(new URL('/home', request.url))
}
 
// Alternatively, you can use a default export:
// export default function proxy(request: NextRequest) { ... }
 
export const config = {
  matcher: '/about/:path*',
}

JavaScript

import { NextResponse } from 'next/server'
 
// This function can be marked `async` if using `await` inside
export function proxy(request) {
  return NextResponse.redirect(new URL('/home', request.url))
}
 
// Alternatively, you can use a default export:
// export default function proxy(request) { ... }
 
export const config = {
  matcher: '/about/:path*',
}

تنظیم matcher به شما اجازه می‌دهد مشخص کنید Proxy تنها روی مسیرهای خاصی اجرا شود. برای آشنایی بیشتر با نحوه تطبیق مسیرها، به مستندات Matcher مراجعه کنید.

همچنین می‌توانید درباره استفاده از Proxy بیشتر مطالعه کنید یا به مرجع API مربوط به Proxy مراجعه نمایید.