מטפלי נתיבים

חלק מהיחידה היסודות של Next.js במסלול ה-React של Coddy. שיעור 37 מתוך 47.

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

תיקייה שמכילה route.js הופכת בדיוק לנתיב הזה. אותו כלל ניתוב כמו בדפים, אבל קובץ מיוחד אחר:

app/
    api/
        dishes/
            route.js     ->  /api/dishes

בתוכו, מייצאים פונקציה ששמה זהה לשם שיטת HTTP:

import { dishes } from '../../../lib/dishes.js';

export async function GET() {
    return Response.json(dishes);
}

Response.json(...) היא התשובה כולה: היא מסדרת את הערך בפורמט JSON ומגדירה את סוג התוכן כ-JSON. אפשר לייצא גם את POST,‏ PUT,‏ DELETE מאותו קובץ.

לאחר מכן, החלק של הלקוח הוא קוד דפדפן רגיל:

const res = await fetch('/api/dishes');
const data = await res.json();

יש שני דברים שחשוב לזכור. תיקייה יכולה להכיל page.jsx או route.js, אבל לעולם לא את שניהם: שניהם יטענו לאותה כתובת URL. ו-route.js אינו רכיב: הוא מחזיר Response, ולא JSX.

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

אתגר

בינוני

בנו API קטן וקראו לו מהדפדפן.

ב־app/api/dishes/route.js, ייצאו async function GET שמחזירה את dishes כ־JSON.
ב־components/DishLoader.jsx, השלימו את loadDishes: בצעו fetch ל־/api/dishes, קראו את גוף ה־JSON ושמרו את שמות המנות באמצעות setNames.

לחיצה על #load-btn חייבת למלא את #dish-list בכל ארבעת השמות.

נסו בעצמכם

import './globals.css';

export const metadata = {
    title: 'My App',
};

export default function RootLayout({ children }) {
    return (
        <html lang="en">
            <body>
                {children}
            </body>
        </html>
    );
}