اذهب إلى المحتوى

السؤال

Recommended Posts

  • 0
نشر

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

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

1.thumb.webp.804636b7ce5647a9bf3012ce335a0196.webp


وفي الملف 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

  • 0
نشر

بخصوص 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.

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

انضم إلى النقاش

يمكنك أن تنشر الآن وتسجل لاحقًا. إذا كان لديك حساب، فسجل الدخول الآن لتنشر باسم حسابك.

زائر
أجب على هذا السؤال...

×   لقد أضفت محتوى بخط أو تنسيق مختلف.   Restore formatting

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   جرى استعادة المحتوى السابق..   امسح المحرر

×   You cannot paste images directly. Upload or insert images from URL.

  • إعلانات

  • تابعنا على



×
×
  • أضف...