LogoENEnglish

استفاده از Next.js به‌عنوان بک‌اند برای فرانت‌اند – هندلرهای عمومی، پردازش داده، و پراکسی‌سازی

Next.js از الگوی Backend for Frontend پشتیبانی می‌کند و به شما اجازه می‌دهد هندلرهای عمومی برای پاسخ به درخواست‌های HTTP بسازید. این مقاله نحوهٔ استفاده از Route Handler، پراکسی، و API Routes را برای ساخت لایه بک‌اند امن و منعطف توضیح می‌دهد — همراه با مثال‌هایی برای پردازش داده، اعتبارسنجی درخواست، و ارائهٔ انواع محتوا.

Backend for FrontendRoute HandlerProxyNextRequestNextResponse

~4 دقیقه مطالعه • بروزرسانی ۴ آبان ۱۴۰۴

مقدمه


Next.js از الگوی Backend for Frontend پشتیبانی می‌کند و به شما اجازه می‌دهد هندلرهای عمومی بسازید که به درخواست‌های HTTP پاسخ دهند و هر نوع محتوایی را بازگردانند — نه فقط HTML. این هندلرها می‌توانند به منابع داده متصل شوند، عملیات انجام دهند، و به‌عنوان لایه API سبک عمل کنند.


شروع پروژه


برای ساخت پروژه جدید با قابلیت بک‌اند:

npx create-next-app@latest --api

این دستور فایل نمونه route.ts را در پوشه app/ ایجاد می‌کند.


Route Handler چیست؟


Route Handlerها هندلرهای عمومی HTTP هستند. آن‌ها را با فایل route.ts یا route.js در مسیر دلخواه تعریف کنید:

// app/api/route.ts
export function GET(request: Request) {
  return new Response('سلام از بک‌اند')
}

مدیریت خطا


export async function POST(request: Request) {
  try {
    await submit(request)
    return new Response(null, { status: 204 })
  } catch (reason) {
    const message = reason instanceof Error ? reason.message : 'خطای غیرمنتظره'
    return new Response(message, { status: 500 })
  }
}

نکته: از ارسال پیام‌های خطای حساس به کلاینت خودداری کنید.


ارائهٔ محتوای غیر UI


Route Handlerها می‌توانند JSON، XML، تصاویر، فایل‌ها و متن ساده سرو کنند. مسیرهای رایج شامل موارد زیر هستند:

  • sitemap.xml
  • manifest.json
  • robots.txt
  • rss.xml

مثال: ارائهٔ فید RSS:

// app/rss.xml/route.ts
export async function GET(request: Request) {
  const rssData = await fetchRSS()
  const rssFeed = `<rss>...</rss>`
  return new Response(rssFeed, {
    headers: { 'content-type': 'application/xml' },
  })
}

خواندن بدنهٔ درخواست


برای خواندن داده‌ها از request.json()، request.formData() یا request.text() استفاده کنید:

export async function POST(request: Request) {
  const data = await request.json()
  return Response.json({ data })
}

اعتبارسنجی ورودی


export async function POST(request: Request) {
  const formData = await request.formData()
  const email = formData.get('email')
  const contents = formData.get('contents')

  try {
    await validateInputs({ email, contents })
    const info = await sendMail({ email, contents })
    return Response.json({ messageId: info.messageId })
  } catch (reason) {
    return new Response('خطا', { status: 500 })
  }
}

کلون کردن درخواست


بدنهٔ درخواست فقط یک‌بار قابل خواندن است. اگر نیاز به خواندن مجدد دارید، آن را کلون کنید:

const cloned = request.clone()
await cloned.body()

پردازش و تبدیل داده


Route Handlerها می‌توانند داده‌ها را از منابع مختلف ترکیب و تبدیل کنند:

export async function POST(request: Request) {
  const body = await request.json()
  const params = new URLSearchParams({ lat: body.lat, lng: body.lng })
  const response = await fetch(`${weatherEndpoint}?${params}`)
  const raw = await response.text()
  const parsed = parseWeatherData(raw)
  return new Response(parsed, { status: 200 })
}

پراکسی‌سازی درخواست‌ها


می‌توانید از Route Handler برای پراکسی‌سازی به بک‌اند دیگر استفاده کنید:

// app/api/[...slug]/route.ts
export async function POST(request: Request, { params }) {
  const isValid = await isValidRequest(request.clone())
  if (!isValid) return new Response(null, { status: 400 })

  const pathname = params.slug.join('/')
  const proxyURL = new URL(pathname, 'https://nextjs.org')
  const proxyRequest = new Request(proxyURL, request)
  return fetch(proxyRequest)
}

استفاده از NextRequest و NextResponse


Next.js نسخهٔ توسعه‌یافته‌ای از Web APIها ارائه می‌دهد:

  • NextRequest: شامل nextUrl برای دسترسی آسان به مسیر و پارامترها
  • NextResponse: شامل متدهایی مانند json()، redirect() و rewrite()

export async function GET(request: NextRequest) {
  const url = request.nextUrl
  if (url.searchParams.get('redirect')) {
    return NextResponse.redirect(new URL('/', request.url))
  }
  return NextResponse.json({ pathname: url.pathname })
}

جمع‌بندی


Next.js ابزارهای قدرتمندی برای ساخت لایه بک‌اند در اختیار شما قرار می‌دهد. با استفاده از Route Handler، پراکسی، و APIهای توسعه‌یافته، می‌توانید داده‌ها را پردازش کرده، محتوا سرو کنید، و با سیستم‌های خارجی تعامل داشته باشید — همه در دل ساختار app.


نوشته و پژوهش شده توسط دکتر شاهین صیامی

Next Article