عرض مصدر Next.js/api routes

<noinclude>{{DISPLAYTITLE:مسارات الواجهة البرمجية API Routes في Next.js}}</noinclude>
تٌعد مسارات الواجهة البرمجية API طريقة لبناء الواجهة البرمجية الخلفية لتطبيقك باستخدام Next.js الذي يعمل في هذه الحالة كواجهة أمامية frontend وواجهة خلفية backend. إذ يُربط كل ملف ضمن المجلد <code>pages/api</code> بالمسار <code>*/api/</code> ويُعامل كوصلة API (نقطة اتصال مع الواجهة البرمجية) بدلًا من كونه صفحة <code>page</code>. تمثّل هذه الوصلات تجمّعات bundles في جانب الخادم فقط ولن تزيد حجم تجميعة التطبيق من جانب العميل. يعيد مسار API التالي <code>pages/api/user.js</code> على سبيل المثال استجابة بصيغة <code>json</code> مع رمز الحالة <code>200</code>:<syntaxhighlight lang="javascript">
export default function handler(req, res) {
  res.status(200).json({ name: 'John Doe' })
}
</syntaxhighlight>'''ملاحظة''': مسارات API ستتأثر عبر ضبط <code>pageExtensions</code> في الملف [[Next.js/next.config.js|next.config.js]].

ولكي يعمل مسار API لا بدّ من تصدير دالة على أنها افتراضية <code>default</code> (مثل الدالة <code>handler</code> في المثال السابق) ومن ثم تستقبل المعاملات التالية:

*<code>req</code>: يضم نسخة عن الكائن [[Node.js/http#.D8.A7.D9.84.D8.B5.D9.86.D9.81%20http.IncomingMessage|http.IncomingMessage]] بالإضافة إلى بعض الأدوات الوسطية middlewares المبنية مسبقًا (سنتعرف عليها لاحقًا في هذه الصفحة).
*<code>res</code>: يضم نسخة عن الكائن [[Node.js/http#.D8.A7.D9.84.D8.B5.D9.86.D9.81%20http.ServerResponse|http.ServerResponse]] بالإضافة إلى دوال مساعدة (سنتعرف عليها لاحقًا في هذه الصفحة).

يمكنك استخدام الكائن <code>req.method</code> ضمن معالج الطلب request handler إن أردت التعامل مع الأنواع المختلفة لطلبات HTTP في مسار API. إليك مثالًا:<syntaxhighlight lang="javascript">
export default function handler(req, res) {
  if (req.method === 'POST') {
    // POST يعالج طلب من النوع 
  } else {
    // يعالج بقية أنواع الطلبات
  }
}
</syntaxhighlight>

=== حالات استخدام مسارت API في Next.js ===
يمكنك بناء الواجهة البرمجية الخلفية API بأكملها لمشروعك الجديد باستخدام مسارات API. فإن كان لديك واجهة برمجية جاهزة، لا حاجة عندها لتوجيه الاستدعاءات إليها من خلال مسارات API. إليك بعض الحالات التي يمكن استخدام مسارات API فيها:

* إخفاء عنوان URL عن خدمة خارجية (مثال: <code>api/secret/</code> بدلًا عن <code><nowiki>https://company.com/secret-url</nowiki></code>)
* استخدام [[Next.js/environment variables|متغيرات بيئة]] ضمن الخادم للولوج الآمن إلى خدمات خارجية.

=== محاذير ===

* لا تحدد مسارات API ترويسات مشاركة الموارد ذات الأصل المختلط CORS، أي أنها افتراضيًا للموارد ذات الأصل المشترك same-origin فقط. يمكنك التحكم بهذا السلوك عبر [https://github.com/vercel/next.js/tree/canary/examples/api-routes-cors تغليف معالج الطلب باستخدام أداة CORS وسطية].
* لا يمكن استخدام مسارات API مع [[Next.js/static html export|<code>next export</code>]].

== مسارات API ديناميكية ==
تدعم مسارات API [[Next.js/Routing|الوجهات الديناميكية]] dynamic routes وتخضع لجميع قواعد تسمية الملفات التي تستخدم مع الصفحات <code>pages</code>. فشيفرة مسار API للوجهة <code>pages/api/post/[pid].js</code> هي كالتالي:<syntaxhighlight lang="javascript">
export default function handler(req, res) {
  const { pid } = req.query
  res.end(`Post: ${pid}`)
}
</syntaxhighlight>فإن أرسل طلب إلى <code>api/post/abc/</code> فسيكون الرد نصًا هو <code>Post: abc</code>.

=== الصفحة index ومسارات API الديناميكية ===
تهيئ المسارات بما يتطابق مع معايير REST (أو كما يُعرف RESTful) بالشكل التالي الأكثر شيوعًا:

* <code>GET api/posts</code>: يُحضر قائمة بالمنشورات التي قد تكون مرتبة في صفحات.
* <code>GET api/posts/12345</code>: يُحضر المنشور ذو المعرّف 12345.

يمكن نمذجة هذه الأمثلة كما يلي:

* الخيار الأول:
** <code>api/posts.js/</code>
** <code>api/posts/[postId].js/</code>
* الخيار الثاني:
** <code>api/posts/index.js/</code>
** <code>api/posts/[postId].js/</code>

إنّ النموذجين السابقين متكافئين. وهنالك خيار ثالث يستخدم فقط النموذج <code>api/posts/[postId].js/</code> لكنه لا يصلح لأنّ المسارات الديناميكية (بما فيها التقاط جميع المسارات Catch-all routes) لا تمتلك حالة غير محددة <code>undefined</code> وبالتالي لن يتمكن <code>GET api/posts</code> من مطابقة الوجهة <code>api/posts/[postId].js/</code> أبدًا.

=== التقاط جميع الوجهات من خلال مسار API الديناميكي ===
بالإمكان توسعة مسارات API الديناميكية لمطابقة كل المسارات وذلك بإضافة ثلاث نقاط <code>...</code> داخل القوسين المربعين. إليك مثالًا:

* تطابق الوجهة <code>pages/api/post/[...slug].js</code> المسار <code>api/post/a/</code> كما تطابق <code>api/post/a/b/</code> و <code>api/post/a/b/c/</code> وهكذا. بإمكانك طبعًا اختيار أي اسم بدلًا من <code>slug</code> مثل <code>[param...]</code>.

تُرسل معاملات البحث كمعاملات استعلام (<code>slug</code> مثال على ذلك) إلى الصفحة، وتشكل المعاملات دائمًا مصفوفة. وبالتالي سيكون كائن الاستعلام عن المسار <code>api/post/a/</code> مثلًا هو:<syntaxhighlight lang="json">
{ "slug": ["a"] }
</syntaxhighlight>في حالة <code>api/post/a/b/</code> وأية مسارات مطابقة أخرى، ستُضاف المعاملات الجديدة إلى المصفوفة كالتالي:<syntaxhighlight lang="json">
{ "slug": ["a", "b"] }
</syntaxhighlight>يبدو مسار API إلى الوجهة <code>pages/api/post/[...slug].js</code> كالتالي:<syntaxhighlight lang="javascript">
export default function handler(req, res) {
  const { slug } = req.query
  res.end(`Post: ${slug.join(', ')}`)
}
</syntaxhighlight>وهكذا سيكون النص <code>Post: a, b, c</code> هو الرد على الطلب <code>api/post/a/b/c/</code>.

=== التقاط جميع الوجهات اختياريًا ===
يمكن التقاط جميع الوجهات اختياريًا بإضافة المعامل بين قوسين مربعين مزدوجين مثل <code><nowiki>[[...slug]]</nowiki></code> إذ ستطابق الوجهة <code>pages/api/post/<nowiki>[[...slug]]</nowiki>.js</code> مثلًا المسارات <code>api/post/</code> و <code>api/post/a/</code> و <code>api/post/a/b/</code> وهكذا.

إنّ الاختلاف الرئيسي بين التقاط جميع الوجهات والتقاط جميع الوجهات اختياريًا هو أنّ الالتقاط الاختياري سيطابق أيضًا المسارات التي لا تضم معامل البحث (المسار <code>api/post/</code> مثالًا). 

سيكون كائن الاستعلام <code>query</code> التالي:<syntaxhighlight lang="javascript">
{ } //`/api/post` سيحصل على المسار 
{ "slug": ["a"] } //(مصفوفة وحيد العنصر) `/api/post/a` سيحصل على المسار 
{ "slug": ["a", "b"] } //(مصفوفة متعددة العناصر) `/api/post/a/b` سيحصل على 
</syntaxhighlight>

=== محاذير ===

* لوجهات API المحددة مسبقًا الأفضلية على الوجهات الدينياميكية والتي لها الأفضلية على جميع المسارات الملتقطة. إليك بعض الأمثلة:
**<code>pages/api/post/create.js</code> يتطابق مع <code>api/post/create/</code>.
** <code>pages/api/post/[pid].js</code> يتطابق مع <code>api/post/1/</code> و <code>api/post/abc/</code> وليس مع <code>api/post/create/</code>.
** <code>pages/api/post/[...slug].js</code> يتطابق مع <code>api/post/1/2/</code> و <code>/api/post/a/b/c/</code> وليس مع <code>api/post/create/</code> و <code>api/post/abc/</code>.

== مساعدو الطلب Request Helpers  ==
تزوّدك مسارات API بمساعدي الطلب request helpers يحللون الطلب الوارد (<code>req</code>) وهي:

* <code>req.cookies</code>: وهي كائن يتضمن ملفات تعريف الارتباط التي يرسلها الطلب. قيمته الافتراضية <code>{}</code>. 
* <code>req.query</code>: وهي كائن يتضمن الاستعلام query، وقيمته الافتراضية <code>{}</code>.
* <code>req.body</code>: وهي كائن يضم جسم الطلب يحلل وفقًا للخاصية <code>content-type</code> أو يأخذ القيمة <code>null</code> إن لم يُرسل جسم الطلب.

=== إعدادات مخصصة ===
يمكن لمسار API أن يُصدّر كائن التهيئة <code>config</code> ليغيّر التهيئة الافتراضية وهي:<syntaxhighlight lang="javascript">
export const config = {
  api: {
    bodyParser: {
      sizeLimit: '1mb',
    },
  },
}
</syntaxhighlight>يضم الكائن <code>api</code> كل الإعدادات المتاحة لمسار API، ويُفعَّل الخيار <code>bodyParser</code> (تحليل جسم الطلب) تلقائيًا. لكن بإمكانك تعطيله بضبط قيمته على <code>false</code> وذلك إن أردت استهلاك جسم الطلب عبر خيار النقل المستمر لبياناته <code>Stream</code> أو بواسطة الخيار <code>[https://www.npmjs.com/package/raw-body raw-body]</code>.

إحدى الحالات التي يُعطَّل فيها الخيار <code>bodyParsing</code> هي الحالة التي نريد فيها التحقق من القيمة الخام لجسم طلب خطاف ويب webhook مصدره GitHub مثلًا:<syntaxhighlight lang="javascript">
export const config = {
  api: {
    bodyParser: false,
  },
}
</syntaxhighlight>تعطي القيمة <code>bodyParser.sizeLimit</code> الحجم الأقصى المسموح للجسم المُحلل بأية صيغة تدعمها المكتبة [https://github.com/visionmedia/bytes.js bytes] كالتالي:<syntaxhighlight lang="javascript">
export const config = {
  api: {
    bodyParser: {
      sizeLimit: '500kb',
    },
  },
}
</syntaxhighlight>تخبر الراية <code>externalResolver</code> الخادم إن كان المسار سيُعالج من قبل محلل خارجي مثل ''express'' أو ''connect''. بتفعيل هذه الراية سيوقف التنبيهات التي سببتها الطلبات غير المحللة unresolved:<syntaxhighlight lang="javascript">
export const config = {
  api: {
    externalResolver: true,
  },
}
</syntaxhighlight>يُفعّل الخيار <code>responseLimit</code> تلقائيًا ويعطي تنبيهًا عندما يزيد حجم جسم الطلب عن 4 ميغابايت. فإن لم تكن تستخدم Next.js في بيئة دون خادم، وكنت تدرك جيدًا تبعات الأداء عند عدم وجود شبكة توزيع محتوى أو مضيف خاص بالوسائط، بإمكانك ألا تحدد قيمة لهذا الخيار بضبطها على <code>false</code>.<syntaxhighlight lang="javascript">
export const config = {
  api: {
    responseLimit: false,
  },
}
</syntaxhighlight>يمكن أن تأخذ <code>responseLimit</code> قيمة تمثل عدد البايتات أو أية قيمة نصية تدعمها المكتبة مثل <code>1000</code> أو <code>'500kb'</code> أو <code>'3mb'</code>. تمثّل هذه القيمة أعلى حجم للاستجابة قبل عرض تنبيه تجاوز الحجم المحدد (القيمة الافتراضية هي 4 ميغابايت):<syntaxhighlight lang="javascript">
export const config = {
  api: {
    responseLimit: '8mb',
  },
}
</syntaxhighlight>

=== توسعة الكائنين <code>req</code> و <code>res</code> باستخدام TypeScript ===

نظرًا لبعض التبعات الأمنية الخاصة بالأنواع، لا يُنصح بتوسعة الكائنين <code>req</code> و <code>res</code> بل استخدم دوال للعمل معهما:<syntaxhighlight lang="javascript">
// utils/cookies.ts

import { serialize, CookieSerializeOptions } from 'cookie'
import { NextApiResponse } from 'next'

/**
 *res ضبط ملفات تعريف الاراتباط باستخدام الكائن 
 */

export const setCookie = (
  res: NextApiResponse,
  name: string,
  value: unknown,
  options: CookieSerializeOptions = {}
) => {
  const stringValue =
    typeof value === 'object' ? 'j:' + JSON.stringify(value) : String(value)

  if ('maxAge' in options) {
    options.expires = new Date(Date.now() + options.maxAge)
    options.maxAge /= 1000
  }

  res.setHeader('Set-Cookie', serialize(name, stringValue, options))
}

// pages/api/cookies.ts

import { NextApiRequest, NextApiResponse } from 'next'
import { setCookie } from '../../utils/cookies'

const handler = (req: NextApiRequest, res: NextApiResponse) => {
    //الذي سيضيف الترويسة res استدعاء الدالة الصرفة باستخدام الكائن
    //`set-cookie` header
  setCookie(res, 'Next.js', 'api-middleware!')
    //لنتمكن من عرضها في المتصفح set-cookie إعادة الترويسة 
   
  res.end(res.getHeader('Set-Cookie'))
}

export default handler
</syntaxhighlight>إن لم تجد بدًا من توسعة هذين الكائنين، عليك أن تنشئ نوعًا خاصًا بك ليضم الخصائص الإضافية:<syntaxhighlight lang="javascript">
// pages/api/foo.ts

import { NextApiRequest, NextApiResponse } from 'next'
import { withFoo } from 'external-lib-foo'

type NextApiRequestWithFoo = NextApiRequest & {
  foo: (bar: string) => void
}

const handler = (req: NextApiRequestWithFoo, res: NextApiResponse) => {
  req.foo('bar') //دون أخطاء في النوع req.foo يمكن استخدام الخاصية 
  res.end('ok')
}

export default withFoo(handler)
</syntaxhighlight>تذكر أن هذا الأسلوب ليس آمنًا لأن الشيفرة ستُصرَّف حتى لو لم تُصدِّر الدالة <code>()withFoo</code>.

== مساعدو الاستجابة Response Helpers ==
يتضمن [[Node.js/http#.D8.A7.D9.84.D8.B5.D9.86.D9.81 http.ServerResponse|كائن استجابة الخادم]] Server Response object (اختصارًا <code>res</code>) مجموعة من الدوال المساعدة التي تشبه مساعدي Express.js تحسّن من تجربة المطوّر وتزيد سرعة إنشاء وصلات API جديدة. إليك بعض الدوال المساعدة:

* <code>res.status(code)</code>: دالة لضبط رمز الحالة التي يرد بها الخادم، وينبغي أن تكون رمز صحيح [https://academy.hsoub.com/programming/general/%D8%B1%D9%85%D9%88%D8%B2-%D8%A7%D9%84%D8%A5%D8%AC%D8%A7%D8%A8%D8%A9-%D9%81%D9%8A-http-r75/ لحالة HTTP].
* <code>res.json(body)</code>: دالة لإرسال استجابة بتنسيق JSON، وينبغي أن يكون جسم الطلب كائنًا قابلًا للسلسلة serializable object (أي يمكن تحويل صيغته إلى شكل آخر).
* <code>res.send(body)</code>: دالة لإرسال استجابة HTTP التي قد تكون <code>body</code> أو <code>string</code> أو <code>object</code> أو <code>Buffer</code>.
* <code>res.redirect([status,] path)</code>: دالة لتحويل الطلب إلى مسار أو عنوان URL محدد. ينبغي أن يكون المعامل <code>status</code> عبارة رمز حالة HTTP صحيح، وستكون قيمته الافتراضية "307" (إعادة توجيه مؤقت) إن لم تُحدد هذه القيمة.
* <code>res.unstable_revalidate(urlPath)</code>: دالة لإعادة التحقق من الصفحة حين الطلب باستخدام الدالة <code>getStaticProps</code>. ينبغي أن يكون المعامل <code>urlPath</code> سلسلة نصية.

=== ضبط رمز الحالة في الاستجابة ===
يمكنك ضبط رمز الحالة عندما تعيد الاستجابة إلى العميل. يضبط المثال التالي قيمة رمز الحالة على "200" (كل شيء على ما يرام <code>ok</code>) ويعيد رسالة على شكل خاصية <code>message</code> قيمتها "Next.js ترحب بك!":<syntaxhighlight lang="javascript">
export default function handler(req, res) {
  res.status(200).json({ message: '!ترحب بك Next.js' })
}
</syntaxhighlight>

=== إرسال استجابة بتنسيق JSON ===
يمكنك إعادة الاستجابة إلى العميل بتنسيق JSON، لكن ينبغي أن تكون الاستجابة كائنًا قابلًا للسلسلة. وقد ترغب في التطبيقات الحقيقية أن تخبر العميل بحالة طلبه وفقًا لاستجابة الوصلة endpoint التي طلبها.

يرسل المثال التالي الاستجابة بتنسيق JSON مع رمز الحالة "200" ونتيجة العملية غير المتزامنة. لاحظ وجود الشيفرة في كتلة <code>try...catch</code> لمعالجة أية أخطاء قد تحدث، وذلك بإرسال رمز الحالة ورسالة خطأ إلى العميل:<syntaxhighlight lang="javascript">
export default async function handler(req, res) {
  try {
    const result = await someAsyncOperation()
    res.status(200).json({ result })
  } catch (err) {
    res.status(500).json({ error: 'failed to load data' })
  }
}
</syntaxhighlight>

=== إرسال استجابة HTTP ===
تُرسل وفق الآلية نفسها التي تُرسل فيها الاستجابة بتنسيق JSON، لكن الفرق الوحيد أنّ جسم الاستجابة قد يكون نصيًا <code>string</code> أو على شكل كائن <code>object</code> أو مخزن من البايتات <code>Buffer</code>. 

يرسل المثال التالي استجابة HTTP مع رمز الحالة "200" ونتيجة العملية غير المتزامنة:<syntaxhighlight lang="javascript">
export default async function handler(req, res) {
  try {
    const result = await someAsyncOperation()
    res.status(200).send({ result })
  } catch (err) {
    res.status(500).send({ error: 'failed to fetch data' })
  }
}
</syntaxhighlight>

=== تحويل الاستجابة إلى مسار أو عنوان URL محدد ===
قد ترغب مثلًا في تحويل العميل إلى مسار أو عنوان محدد عندما ينقر زر إرسال نموذج form. لاحظ كيف يوجّه المثال التالي العميل إلى المسار <code>/</code> عندما يُرسل النموذج بنجاح:<syntaxhighlight lang="javascript">
export default async function handler(req, res) {
  const { name, message } = req.body
  try {
    await handleFormInputAsync({ name, message })
    res.redirect(307, '/')
  } catch (err) {
    res.status(500).send({ error: 'failed to fetch data' })
  }
}
</syntaxhighlight>

=== إضافة أنواع TypeScript ===
بإمكانك أن تجعل معالج الاستجابة أكثر أمانًا من ناحية النوع الذي يعيده بإدراج النوعين <code>NextApiRequest</code> و <code>NextApiResponse</code> من <code>next</code> كما يمكنك تحديد نوع البيانات التي ستعديدها في الاستجابة:<syntaxhighlight lang="javascript">
import type { NextApiRequest, NextApiResponse } from 'next'

type ResponseData = {
  message: string
}

export default function handler(
  req: NextApiRequest,
  res: NextApiResponse<ResponseData>
) {
  res.status(200).json({ message: 'Hello from Next.js!' })
}
</syntaxhighlight>'''ملاحظة''': نوع الكائن body في NextApiRequest هو any بسبب أن العميل يمكن أن يضمن في جسم الطلب أي شيء، لذا يجب عليك التحقق من نوعه إن كنت تتوقع شيئًا محددًا من العميل قبل التعامل معه. 

لمعلومات أكثر، راجع توثيق استخدام [[Next.js/typescript|TypeScript في Next.js]].

== استخدام وجهات API المعتمدة على المشغل المتقدم Edge ==
تتيح لك وجهات API المعتمدة على المشغل المتقدم edge runtime بناء واجهات برمجية API عالية الأداء باستخدام Next.js. وتُعد الواجهات البرمجية API المبنية باستخدام المكتبة [[Next.js/edge runtime|Edge Runtime]] أسرع من تلك المبنية باستخدام Node.js. يأتي التحسن في أداء هذه الواجهات من وجود بعض التقييدات مثل عدم القدرة على الوصول إلى واجهات Node.js البرمجية الأصلية. إذ تُبنى الواجهات البرمجية في هذه الحالة باستخدام وجهات API المتقدمة وفقًا لمعايير واجهات الويب البرمجية Web APIs.

يرتبط كل ملف ضمن المجلد <code>pages/api</code> بالوجهة <code>*/api/</code> وستتعامل معه Next.js على أنها واجهة برمجية بدلًا من كونها صفحات. تُعد هذه الواجهات تجمّعات في طرف الخادم ولن تزيد حجم الحزمة في طرف العميل.

===== أمثلة =====

==== مثال تمهيدي ====
<syntaxhighlight lang="javascript">
export const config = {
  runtime: 'edge',
}

export default (req) => new Response('Hello world!')
</syntaxhighlight>

=== استجابة بتنسيق JSON ===
<syntaxhighlight lang="javascript">
import type { NextRequest } from 'next/server'

export const config = {
  runtime: 'edge',
}

export default async function handler(req: NextRequest) {
  return new Response(
    JSON.stringify({
      name: 'Jim Halpert',
    }),
    {
      status: 200,
      headers: {
        'content-type': 'application/json',
      },
    }
  )
}
</syntaxhighlight>

==== التحكم بحجم المخزن المؤقت ====
<syntaxhighlight lang="javascript">
import type { NextRequest } from 'next/server'

export const config = {
  runtime: 'edge',
}

export default async function handler(req: NextRequest) {
  return new Response(
    JSON.stringify({
      name: 'Jim Halpert',
    }),
    {
      status: 200,
      headers: {
        'content-type': 'application/json',
        'cache-control': 'public, s-maxage=1200, stale-while-revalidate=600',
      },
    }
  )
}
</syntaxhighlight>

==== معاملات استعلام ====
<syntaxhighlight lang="javascript">
import type { NextRequest } from 'next/server'

export const config = {
  runtime: 'edge',
}

export default async function handler(req: NextRequest) {
  const { searchParams } = new URL(req.url)
  const email = searchParams.get('email')
  return new Response(email)
}
</syntaxhighlight>

==== توجيه الترويسات ====
<syntaxhighlight lang="javascript">
import { type NextRequest } from 'next/server'

export const config = {
  runtime: 'edge',
}

export default async function handler(req: NextRequest) {
  const authorization = req.cookies.get('authorization')?.value
  return fetch('https://backend-api.com/api/protected', {
    method: req.method,
    headers: {
      authorization,
    },
    redirect: 'manual',
  })
}
</syntaxhighlight>

=== تهيئة إعداد المناطق من أجل نشر التطبيق ===
قد ترغب في حصر الدوال التي تُنفّذ عن طريقة المشغّل الحدودي edge بمناطق معينة عند نشر التطبيق حتى تبقى قريبًا من مصدر البيانات وتتأكد من تحقيق زمن استجابة أسرع وذلك باستخدام الطريقة التالية:<syntaxhighlight lang="javascript">
import { NextResponse } from 'next/server'

export const config = {
  regions: ['sfo1', 'iad1'], // defaults to 'all'
}

export default async function handler(req: NextRequest) {
  const myData = await getNearbyData()
  return NextResponse.json(myData)
}
</syntaxhighlight>يُتاح هذا الإعداد للنسخ 12.3.2 وما بعد من Next.js

=== الاختلافات بين وجهات API ===
تستخدم وجهات API المتقدمة (التي ينفذها المشغّل edge) المكتبة Edge Runtime، بينما تستخدم وجهات API النمطية مشغل Node.js. ويمكن لوجهات API المتقدمة سحب الاستجابات من الخادم ومن ثم تعمل بعد الوصول إلى الملفات المخزنة مؤقتًا مثل ملفات HTML و CSS وجافاسكربت. يمكن لهذه الطريقة أن تساعد في تحسين الأداء من خلال تقليل مؤشر "زمن وصول البايت الأول TTFB".

'''ملاحظة''': لا يتيح استخدام  [[Next.js/edge runtime|Edge Runtime]] مع الدالة <code>getServerSideProps</code> إمكانية الوصول إلى كائن الاستجابة. فإن أردت الوصول إلى الكائن <code>res</code> لا بد من استخدام مشغّل Node.js runtime عن طريق الإعداد التالي:  <code>'runtime: 'nodejs</code>.

== أمثلة ==
* [https://github.com/vercel/next.js/tree/canary/examples/api-routes Basic API Routes]
* [https://github.com/vercel/next.js/tree/canary/examples/api-routes-graphql API Routes with GraphQL]
* [https://github.com/vercel/next.js/tree/canary/examples/api-routes-rest API Routes with REST]
* [https://github.com/vercel/next.js/tree/canary/examples/api-routes-cors API Routes with CORS]
* [https://github.com/vercel/next.js/tree/canary/examples/api-routes-middleware API Routes Request Helpers]

== المصادر ==

* صفحات [https://nextjs.org/docs/api-routes API Routes] من توثيق Next.js الرسمي.
[[تصنيف:Next.js|{{SUBPAGENAME}}]]
[[تصنيف:Next.js Routing|{{SUBPAGENAME}}]]