منتصر احمد نشر 23 يونيو 2023 أرسل تقرير مشاركة نشر 23 يونيو 2023 كيف يمكنني إنشاء api routes في ال app routing في next js 13 مع typescript ؟ 1 اقتباس رابط هذا التعليق شارك على الشبكات الإجتماعية More sharing options...
0 عمر قره محمد نشر 23 يونيو 2023 أرسل تقرير مشاركة نشر 23 يونيو 2023 قم بتنزيل حزمة 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 1 اقتباس رابط هذا التعليق شارك على الشبكات الإجتماعية More sharing options...
0 Mustafa Suleiman نشر 23 يونيو 2023 أرسل تقرير مشاركة نشر 23 يونيو 2023 بخصوص 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 1 اقتباس رابط هذا التعليق شارك على الشبكات الإجتماعية More sharing options...
السؤال
منتصر احمد
كيف يمكنني إنشاء api routes في ال app routing في next js 13 مع typescript ؟
رابط هذا التعليق
شارك على الشبكات الإجتماعية
2 أجوبة على هذا السؤال
Recommended Posts
انضم إلى النقاش
يمكنك أن تنشر الآن وتسجل لاحقًا. إذا كان لديك حساب، فسجل الدخول الآن لتنشر باسم حسابك.