كيف يتم انشاء ال api في next js 13 - app routing

قم بتنزيل حزمة next مع الـ typescript  والـ app routing وسيكون هنالك مثال جاهز لكيفية استخدام الـ api routes معهم.

حيث يجب ان يكون مخطط المجلدات مثل :

وفي الملف route ضع :

import { NextResponse } from 'next/server'

export async function GET() {

	const data = {
		name: "omar",
		age: 23
	}

	return NextResponse.json({ data })
}

وفي هذه الحالة يمكنك الوصول إلى الـ route بعد تشغيل السيرفر من خلال الرابط 

http://localhost:3000/api

بخصوص Next.js 13 مع TypeScript ، تستطيع إنشاء مسارات API باستخدام ملفات الـ API في المجلد pages/api في مشروعك، ويتم تحويل هذه الملفات تلقائيًا إلى مسارات API بواسطة Next.js.

واستخدام TypeScript يعني أنه بإمكانك أيضًا تعريف نوع البيانات الذي يتم استلامه وإرجاعه من المسارات، وإليك الخطوات الأساسية:

1- أنشئ ملفًا جديدًا في المجلد pages/api بامتداد .ts أو .tsx، مثل:

pages/api/example.ts

2- في ذلك الملف، قم بتصدير وظيفة default استدعائها بواسطة Next.js، وتلك الوظيفة ستتلقى طلب HTTP وترجع الاستجابة، وتستطيع تعريف نوع بيانات الطلب والاستجابة باستخدام TypeScript كالتالي:

import { NextApiRequest, NextApiResponse } from 'next';

export default function handler(req: NextApiRequest, res: NextApiResponse) {
  // قم بتنفيذ المنطق الخاص بك هنا
  res.status(200).json({ message: 'Hello from the API' });
}

وبمجرد حفظ الملف، سيتم تحويله تلقائيًا إلى مسار API في Next.js، مثل  /api/example.

والآن توجه إلى المسار API الجديد عبر المتصفح أو عبر طلبه من التطبيق نفسه.

ومن الأسهل استخدام مكتبات إضافية مثل axios للتعامل مع طلبات API الخارجية، وأيضًا تعيين رموز استجابة مخصصة وتعريف النماذج والاستعلامات في TypeScript.

وستجد المزيد من الشرح في المستند الرسمي:

• https://nextjs.org/docs/pages/building-your-application/routing/api-routes