كيفية إنشاء واستهلاك واجهة برمجة التطبيقات في Next.js

لقد ولت الأيام التي كان عليك فيها إنشاء خلفية منفصلة لموقع الويب الخاص بك. باستخدام توجيه واجهة برمجة التطبيقات المستند إلى ملف Next.js ، يمكنك جعل حياتك أسهل عن طريق كتابة واجهة برمجة التطبيقات الخاصة بك داخل مشروع Next.js.

Next.js هو إطار عمل تعريف لـ React مع ميزات تبسط عملية إنشاء تطبيقات ويب جاهزة للإنتاج. سترى كيفية إنشاء واجهة برمجة تطبيقات REST في Next.js واستهلاك البيانات من واجهة برمجة التطبيقات هذه على صفحة Next.js.

أنشئ مشروع Next.js باستخدام create-next-app

يمكنك إنشاء مشروع Next.js جديد باستخدام أداة إنشاء التطبيق التالي CLI. يقوم بتثبيت الحزم والملفات الضرورية لتبدأ في إنشاء تطبيق Next.js.

قم بتشغيل هذا الأمر في محطة لإنشاء مجلد Next.js جديد يسمى مسارات api. قد تتلقى مطالبة لتثبيت create-next-app.

npx يخلق-التالي-app api- المسارات

عند انتهاء الأمر ، افتح مجلد مسارات واجهة برمجة التطبيقات لبدء إنشاء مسارات واجهة برمجة التطبيقات.

توجيه API في Next.js

تعمل مسارات API على الخادم ولها العديد من الاستخدامات مثل حفظ بيانات المستخدم في قاعدة بيانات أو جلب البيانات من واجهة برمجة التطبيقات دون زيادة خطأ سياسة CORS.

في Next.js ، يجب عليك إنشاء مسارات API داخل مجلد / pages / api. ينشئ Next.js نقاط نهاية API لكل ملف من الملفات الموجودة في هذا المجلد. إذا أضفت user.js إلى / pages / api ، فسيقوم Next.js بإنشاء نقطة نهاية في http://localhost: 3000 / api / مستخدم.

يحتوي مسار Next.js API الأساسي على البنية التالية.

يصدّرتقصيروظيفةمعالج(مطلوب ، الدقة) {
 res.status (200) .json ({الاسم: 'فلان الفلاني' })
}

يجب عليك تصدير وظيفة المعالج حتى تعمل.

إنشاء مسارات API

قم بإنشاء ملف جديد يسمى todo.js بتنسيق /pages/api مجلد لإضافة مسار API لعناصر المهام.

السخرية من قاعدة بيانات Todo

للحصول على المهام ، يجب عليك إنشاء نقطة نهاية GET. للبساطة. يستخدم هذا البرنامج التعليمي مجموعة من عناصر المهام بدلاً من قاعدة البيانات ولكن لا تتردد في استخدام قاعدة بيانات مثل MongoDB أو MySQL.

قم بإنشاء عناصر المهام في todo.js في المجلد الجذر للتطبيق الخاص بك ثم أضف البيانات التالية.

يصدّرمقدار ثابت todos = [
 {
 المعرف: 1 ،
 لكى يفعل: "افعل شيئًا لطيفًا لشخص أهتم به",
 مكتمل: حقيقي,
 معرف المستخدم: 26 ،
 },
 {
 المعرف: 2 ،
 لكى يفعل: "احفظ الخمسين ولاية وعواصمها",
 مكتمل: خطأ شنيع,
 معرف المستخدم: 48 ،
 },
// مهام أخرى
];

عناصر المهام هذه مأخوذة من موقع DummyJSON الإلكتروني ، أ REST API للحصول على بيانات وهمية. يمكنك العثور على البيانات الدقيقة من هذا DummyJSON todos endpoint.

بعد ذلك ، أنشئ مسار واجهة برمجة التطبيقات بتنسيق /pages/api/todos.js وإضافة وظيفة المعالج.

يستورد {todos} من "../../لكى يفعل"؛
يصدّروظيفةمعالج(مطلوب ، الدقة) {
مقدار ثابت {طريقة} = مطلوب ؛
يُحوّل (طريقة) {
 قضية "يحصل":
الدقة.حالة(200).json(تودوس);
استراحة;
 قضية "بريد":
مقدار ثابت {todo، complete} = req.body؛
تودوس.يدفع({
بطاقة تعريف: تودوس.طول + 1,
 لكى يفعل،
 مكتمل،
 });
الدقة.حالة(200).json(تودوس);
استراحة;
تقصير:
 res.setHeader ("يسمح", ["يحصل", "بريد"]);
 res.status (405).نهاية(الطريقة $ {طريقة} غير مسموح به);
استراحة;
 }
}

يعالج هذا المسار نقطتي نهاية GET و POST. يقوم بإرجاع جميع todos لطلب GET ويضيف عنصر todo إلى قاعدة بيانات todo لطلب POST. بالنسبة للطرق الأخرى ، يقوم المعالج بإرجاع خطأ.

تستهلك مسارات API في الواجهة الأمامية

لقد قمت بإنشاء نقطة نهاية API تقوم بإرجاع كائن JSON يحتوي على مصفوفة من todos.

لاستهلاك API ، أنشئ وظيفة تسمى fetchTodos تسترد البيانات من نقطة نهاية API. تستخدم الوظيفة طريقة الجلب ولكن يمكنك أيضًا استخدم Axios لتقديم طلبات API. ثم استدعاء هذه الوظيفة عند النقر فوق زر.

يستورد رأس من "التالي / الرأس" ؛
يستورد {useState} من "تتفاعل"؛ 
يصدّرتقصيروظيفةبيت() {
مقدار ثابت [todos، Settodos] = useState ([]) ؛
مقدار ثابت fetchTodos = غير متزامن () => {
مقدار ثابت استجابة = انتظر أحضر("/api/todos ") ؛
مقدار ثابت البيانات = انتظر response.json () ؛
 سيتودوس (بيانات) ؛
 };
يعود (
<div className = {styles.container}>
<رأس>
<عنوان>إنشاء التطبيق التالي</title>
<اسم التعريف ="وصف" المحتوى ="تم إنشاؤه عن طريق إنشاء التطبيق التالي" />
<ارتباط rel ="أيقونة" href ="/favicon.ico" />
</Head>
<رئيسي>
<زر onClick = {fetchTodos}>احصل على todos</button>
<ماي>
 {todos.map ((todo) => {
يعود (
<لي
 النمط = {{color: `$ {todo.completed؟ "أخضر": "أحمر"}` }}
 مفتاح = {todo.id}
>
 {todo.todo}: {todo.completed}.
</li>
 );
 })}
</ul>
</main>
</div>
 );
}

تعرض القائمة الموجودة في هذا المقتطف عناصر المهام عند جلبها.

بالنسبة لنقطة نهاية POST ، قم بإنشاء وظيفة جديدة تسمى saveTodo تقوم بإجراء طلب POST لواجهة برمجة التطبيقات. يخزن طلب الجلب عنصر المهام الجديد في النص ويعيد جميع عناصر المهام بما في ذلك العنصر الجديد. تقوم وظيفة saveTodo بعد ذلك بتخزينها في حالة todos.

مقدار ثابت saveTodo = غير متزامن () => {
مقدار ثابت استجابة = انتظر أحضر("/api/todos "، {
 طريقة: "بريد",
 جسم: جسون.stringify (newTodo) ،
 الرؤوس: {
"نوع المحتوى": "التطبيق / json",
 },
 });
مقدار ثابت البيانات = انتظر response.json () ؛
 سيتودوس (بيانات) ؛
};

بعد ذلك ، قم بإنشاء نموذج مع شريط إدخال النص لتلقي عنصر المهام الجديد. ستستدعي وظيفة معالج الإرسال في هذا النموذج وظيفة saveTodo.

يستورد رأس من "التالي / الرأس" ؛
يستورد {useReducer، useState} من "تتفاعل"؛
يستورد الأنماط من "../styles/Home.module.css" ؛
يصدّرتقصيروظيفةبيت() {
مقدار ثابت [todos، Settodos] = useState ([]) ؛
مقدار ثابت [newTodo، setnewTodo] = useState ({
 لكى يفعل: "",
 مكتمل: خطأ شنيع,
 });
مقدار ثابت fetchTodos = غير متزامن () => {
// fetchTodos
 };
مقدار ثابت saveTodo = غير متزامن (هـ) => {
مقدار ثابت استجابة = انتظر أحضر("/api/todos "، {
 طريقة: "بريد",
 جسم: جسون.stringify (newTodo) ،
 الرؤوس: {
"نوع المحتوى": "التطبيق / json",
 },
 });
مقدار ثابت البيانات = انتظر response.json () ؛
 سيتودوس (بيانات) ؛
 };
مقدار ثابت handleChange = (هـ) => {
 setnewTodo ({
لكى يفعل: ه.هدف.قيمة,
 });
 };
مقدار ثابت handleSubmit = (e) => {
ه.منع افتراضي();
 saveTodo () ،
 setnewTodo ({
 لكى يفعل: '',
 });
 };
يعود (
<div className = {styles.container}>
<رأس>
<عنوان>إنشاء التطبيق التالي</title>
<اسم التعريف ="وصف" المحتوى ="تم إنشاؤه عن طريق إنشاء التطبيق التالي" />
<ارتباط rel ="أيقونة" href ="/favicon.ico" />
</Head>
<رئيسي>
// يجلب عناصر المهام عند النقر عليها
<زر onClick = {fetchTodos}>احصل على todos</button>
// يحفظ عنصر مهام جديد عند إرساله
<النموذج onSubmit = {handleSubmit}>
<نوع الإدخال ="نص" عند التغيير = {handleChange} القيمة = {newTodo.todo} />
</form>
<ماي>
 {// list todo items}
</ul>
</main>
</div>
 );
}

يضيف المعالج أمرًا جديدًا إلى قاعدة البيانات في كل مرة يرسل فيها المستخدم النموذج. أيضًا ، تقوم هذه الوظيفة بتحديث قيمة todos باستخدام البيانات المستلمة من API والتي بدورها تضيف عنصر todo الجديد إلى القائمة.

يعد توجيه واجهة برمجة التطبيقات إحدى نقاط القوة في Next.js

لقد رأيت كيفية إنشاء مسار Next.js API واستخدامه. يمكنك الآن إنشاء تطبيق مكدس كامل دون مغادرة مجلد مشروع Next.js. يعد توجيه واجهة برمجة التطبيقات أحد الفوائد العديدة التي يوفرها Next.js.

يوفر Next.js أيضًا تحسينات في الأداء مثل تقسيم التعليمات البرمجية والتحميل البطيء ودعم CSS المدمج. إذا كنت تنشئ موقعًا إلكترونيًا يجب أن يكون سريعًا ومناسبًا لتحسين محركات البحث ، فيجب أن تفكر في Next.js.