כיצד לבנות ולצרוך ממשק API ב-Next.js

חלפו הימים שבהם היית צריך ליצור קצה אחורי נפרד לאתר שלך. עם ניתוב API מבוסס קבצים של Next.js, אתה יכול להקל על חייך על ידי כתיבת ה-API שלך בתוך פרויקט Next.js.

Next.js היא מטא-מסגרת של React עם תכונות שמפשטות את תהליך בניית אפליקציות אינטרנט מוכנות לייצור. תראה כיצד לבנות REST API ב-Next.js ולצרוך את הנתונים מאותו API בדף Next.js.

צור פרויקט Next.js באמצעות create-next-app

אתה יכול ליצור פרויקט Next.js חדש באמצעות כלי ה-CLI create-next-app. הוא מתקין את החבילות והקבצים הדרושים כדי להתחיל בבניית יישום Next.js.

הפעל פקודה זו במסוף כדי ליצור תיקיית Next.js חדשה בשם api-routes. ייתכן שתקבל הנחיה להתקין את האפליקציה create-next.

npx לִיצוֹר-הַבָּא-מסלולי API של אפליקציות

כאשר הפקודה מסתיימת, פתח את תיקיית ה-API-routes כדי להתחיל ליצור את נתיבי ה-API.

ניתוב API ב-Next.js

מסלולי API פועלים על השרת ויש להם שימושים רבים כמו שמירת נתוני משתמש במסד נתונים או שליפת נתונים מ-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({ name: 'פלוני אלמוני' })
}

עליך לייצא את פונקציית המטפל כדי שהיא תעבוד.

יצירת נתיבי API

צור קובץ חדש בשם todo.js ב- /pages/api תיקייה כדי להוסיף נתיב API עבור פריטי מטלות.

לועג למסד הנתונים של Todo

כדי לקבל את המשימות, עליך ליצור נקודת קצה של GET. לצורך הפשטות. הדרכה זו משתמשת במערך של פריטי מטלות במקום מסד נתונים, אך אל תהסס להשתמש במסד נתונים כמו MongoDB או MySQL.

צור את פריטי המטלות ב-todo.js בתיקיית הבסיס של היישום שלך ואז הוסף את הנתונים הבאים.

יְצוּאconst מטלות = [
 {
 מזהה: 1,
 לעשות: "תעשה משהו נחמד למישהו שאכפת לי ממנו",
 הושלם: נָכוֹן,
 מזהה משתמש: 26,
 },
 {
 מזהה: 2,
 לעשות: "לשנן את חמישים המדינות ובירותיהן",
 הושלם: שֶׁקֶר,
 UserId: 48,
 },
// מטלות אחרות
];

פריטי המטלות הללו הם מאתר DummyJSON, א REST API לנתונים מדומים. אתה יכול למצוא את הנתונים המדויקים מזה DummyJSON todos נקודת קצה.

לאחר מכן, צור את נתיב ה-API ב /pages/api/todos.js ולהוסיף את פונקציית המטפל.

יְבוּא { לעשות } מ "../../לעשות";
יְצוּאפוּנקצִיָהמטפל(דרישה, מילואים) {
const { method } = req;
החלף (שיטה) {
 מקרה "לקבל":
מילואים.סטָטוּס(200)‎.json(לעשות);
לשבור;
 מקרה "הודעה":
const { todo, completed } = req.body;
לעשות.לִדחוֹף({
תְעוּדַת זֶהוּת: לעשות.אורך + 1,
 לעשות,
 הושלם,
 });
מילואים.סטָטוּס(200)‎.json(לעשות);
לשבור;
בְּרִירַת מֶחדָל:
 res.setHeader("להתיר", ["לקבל", "הודעה"]);
 res.status(405).סוֹף(`שיטה ${method} לא מותר`);
לשבור;
 }
}

מסלול זה מטפל בנקודות הקצה GET ו-POST. זה מחזיר את כל המשימות עבור בקשת GET ומוסיף פריט מטלות למסד הנתונים של מטלות עבור בקשת POST. עבור שיטות אחרות, המטפל מחזיר שגיאה.

צריכת נתיבי API בחזית הקצה

יצרת נקודת קצה API שמחזירה אובייקט JSON המכיל מערך של מטלות.

כדי לצרוך את ה-API, צור פונקציה בשם fetchTodos המאחזרת נתונים מנקודת הקצה של ה-API. הפונקציה משתמשת בשיטת האחזור אבל אתה יכול גם השתמש ב-Axios כדי לבצע בקשות API. לאחר מכן קרא לפונקציה זו כאשר אתה לוחץ על כפתור.

יְבוּא רֹאשׁ מ "הבא/ראש";
יְבוּא { useState } מ "לְהָגִיב"; 
יְצוּאבְּרִירַת מֶחדָלפוּנקצִיָהבית() {
const [todos, settodos] = useState([]);
const fetchTodos = אסינכרון () => {
const תגובה = לְהַמתִין לְהָבִיא("/api/לעשות");
const נתונים = לְהַמתִין response.json();
 settodos (נתונים);
 };
לַחֲזוֹר (
<div className={styles.container}>
<רֹאשׁ>
<כותרת>צור את האפליקציה הבאה</title>
<מטא שם="תיאור" תוכן="נוצר על ידי צור את האפליקציה הבאה" />
<קישור rel="סמל" href="/favicon.ico" />
</Head>
<רָאשִׁי>
<button onClick={fetchTodos}>קבל מטלות</button>
<ul>
 {todos.map((todo) => {
לַחֲזוֹר (
<לי
 style={{ color: `${todo.completed? "ירוק": "אָדוֹם"}` }}
 key={todo.id}
>
 {todo.todo}:{todo.completed}.
</li>
 );
 })}
</ul>
</main>
</div>
 );
}

הרשימה בקטע זה מציגה את פריטי המטלות בעת שליפתם.

עבור נקודת הקצה של POST, צור פונקציה חדשה בשם saveTodo שמבצעת בקשת POST ל-API. בקשת האחזור מאחסנת את פריט ה-todo החדש בגוף ומחזירה את כל פריטי ה-todo כולל החדש. לאחר מכן הפונקציה saveTodo מאחסנת אותם במצב todos.

const saveTodo = אסינכרון () => {
const תגובה = לְהַמתִין לְהָבִיא("/api/לעשות", {
 שיטה: "הודעה",
 גוּף: JSON.stringify (newTodo),
 כותרות: {
"סוג תוכן": "application/json",
 },
 });
const נתונים = לְהַמתִין response.json();
 settodos (נתונים);
};

לאחר מכן, צור טופס עם סרגל קלט טקסט כדי לקבל את פריט המטלות החדש. פונקציית ההגשה של טופס זה תקרא לפונקציה saveTodo.

יְבוּא רֹאשׁ מ "הבא/ראש";
יְבוּא { useReducer, useState } מ "לְהָגִיב";
יְבוּא סגנונות מ "../styles/Home.module.css";
יְצוּאבְּרִירַת מֶחדָלפוּנקצִיָהבית() {
const [todos, settodos] = useState([]);
const [newTodo, setnewTodo] = useState({
 לעשות: "",
 הושלם: שֶׁקֶר,
 });
const fetchTodos = אסינכרון () => {
// fetchTodos
 };
const saveTodo = אסינכרון (ה) => {
const תגובה = לְהַמתִין לְהָבִיא("/api/לעשות", {
 שיטה: "הודעה",
 גוּף: JSON.stringify (newTodo),
 כותרות: {
"סוג תוכן": "application/json",
 },
 });
const נתונים = לְהַמתִין response.json();
 settodos (נתונים);
 };
const handleChange = (e) => {
 setnewTodo({
לעשות: ה.יַעַד.ערך,
 });
 };
const handleSubmit = (e) => {
ה.preventDefault();
 saveTodo();
 setnewTodo({
 לעשות: '',
 });
 };
לַחֲזוֹר (
<div className={styles.container}>
<רֹאשׁ>
<כותרת>צור את האפליקציה הבאה</title>
<מטא שם="תיאור" תוכן="נוצר על ידי צור את האפליקציה הבאה" />
<קישור rel="סמל" href="/favicon.ico" />
</Head>
<רָאשִׁי>
// שואב את פריטי המטלות בעת לחיצה
<button onClick={fetchTodos}>קבל מטלות</button>
// שומר פריט מטלה חדש בעת הגשתו
<form onSubmit={handleSubmit}>
<סוג קלט="טֶקסט" onChange={handleChange} value={newTodo.todo} />
</form>
<ul>
 {// רשימת פריטי מטלות}
</ul>
</main>
</div>
 );
}

המטפל מוסיף מטלה חדשה למסד הנתונים בכל פעם שמשתמש שולח את הטופס. כמו כן, פונקציה זו מעדכנת את ערך ה-todos באמצעות הנתונים המתקבלים מה-API אשר בתורו מוסיף את פריט ה-todo החדש לרשימה.

ניתוב API הוא רק אחד מהיתרונות של Next.js

ראית איך אתה בונה ומשתמש במסלול של Next.js API. כעת אתה יכול ליצור יישום ערימה מלאה מבלי לעזוב את תיקיית הפרויקט Next.js שלך. ניתוב API הוא אחד מהיתרונות הרבים ש-Next.js מספק.

Next.js מציע גם אופטימיזציות של ביצועים כגון פיצול קוד, טעינה עצלנית ותמיכה מובנית ב-CSS. אם אתה בונה אתר שצריך להיות מהיר וידידותי לקידום אתרים, כדאי לשקול את Next.js.