النماذج والتحولات (Forms and Mutations)

تمكنك النماذج من إنشاء وتحديث البيانات في تطبيقات الويب. يوفر Next.js طريقة قوية للتعامل مع إرسال النماذج وتحويل البيانات باستخدام مسارات API (API Routes).

معلومة مفيدة:

سنوصي قريبًا بتبني تدريجي لموجه التطبيق (App Router) واستخدام إجراءات الخادم (Server Actions) للتعامل مع إرسال النماذج وتحويل البيانات. تسمح إجراءات الخادم بتعريف دوال غير متزامنة على الخادم يمكن استدعاؤها مباشرة من مكوناتك، دون الحاجة إلى إنشاء مسار API يدويًا.

لا تحدد مسارات API رؤوس CORS، مما يعني أنها تعمل فقط من نفس المصدر افتراضيًا.

نظرًا لأن مسارات API تعمل على الخادم، يمكننا استخدام قيم حساسة (مثل مفاتيح API) عبر متغيرات البيئة (Environment Variables) دون الكشف عنها للعميل. هذا أمر بالغ الأهمية لأمان تطبيقك.

أمثلة

إعادة التوجيه

إذا كنت ترغب في توجيه المستخدم إلى مسار مختلف بعد التحويل، يمكنك استخدام redirect لأي عنوان URL مطلق أو نسبي:

import type { NextApiRequest, NextApiResponse } from 'next'

export default async function handler(
  req: NextApiRequest,
  res: NextApiResponse
) {
  const id = await addPost()
  res.redirect(307, `/post/${id}`)
}

export default async function handler(req, res) {
  const id = await addPost()
  res.redirect(307, `/post/${id}`)
}

تعيين ملفات تعريف الارتباط (Cookies)

يمكنك تعيين ملفات تعريف الارتباط داخل مسار API باستخدام طريقة setHeader على الاستجابة:

import type { NextApiRequest, NextApiResponse } from 'next'

export default async function handler(
  req: NextApiRequest,
  res: NextApiResponse
) {
  res.setHeader('Set-Cookie', 'username=lee; Path=/; HttpOnly')
  res.status(200).send('تم تعيين ملف تعريف الارتباط.')
}

قراءة ملفات تعريف الارتباط

يمكنك قراءة ملفات تعريف الارتباط داخل مسار API باستخدام مساعد الطلب cookies:

import type { NextApiRequest, NextApiResponse } from 'next'

export default async function handler(
  req: NextApiRequest,
  res: NextApiResponse
) {
  const auth = req.cookies.authorization
  // ...
}

حذف ملفات تعريف الارتباط

يمكنك حذف ملفات تعريف الارتباط داخل مسار API باستخدام طريقة setHeader على الاستجابة:

import type { NextApiRequest, NextApiResponse } from 'next'

export default async function handler(
  req: NextApiRequest,
  res: NextApiResponse
) {
  res.setHeader('Set-Cookie', 'username=; Path=/; HttpOnly; Max-Age=0')
  res.status(200).send('تم حذف ملف تعريف الارتباط.')
}