معالجات المسار

جزء من قسم أساسيات Next.js في رحلة React على Coddy — الدرس 37 من 47.

تغطي مكونات الخادم (Server components) معظم احتياجات البيانات، لأنها تعمل على الخادم بالفعل. ولكن في بعض الأحيان يتعين على المتصفح طلب البيانات لاحقًا، بعد النقر، أو بعد استقرار صندوق البحث، ولهذا السبب تحتاج إلى نقطة نهاية (endpoint) لطلبها.

المجلد الذي يحتوي على ملف route.js بداخل يصبح كذلك تمامًا. نفس قاعدة التوجيه الخاصة بالصفحات (pages)، ولكن بملف خاص مختلف:

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

في الداخل، تقوم بتصدير تصدير دالة export مسماة باسم طريقة HTTP:

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

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

إنّ Response.json(...) هو الرد بالكامل: فهو يقوم بتسلسل (serialize) القيمة ويضبط نوع المحتوى إلى JSON. يمكنك أيضاً تصدير POST، PUT، و DELETE من نفس الملف.

ثم إن النصف الخاص بـ client هو كود متصفح عادي:

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

أمران يجب التمييز بينهما. يمكن للمجلد أن يحتوي على page.jsx أو route.js، وليس كلاهما أبداً: حيث سينادي كلاهما على نفس عنوان URL. كما أن route.js ليس مكوّناً (component): فهو يرجع Response، وليس JSX.

استعن بـ route handler عندما يحتاج المتصفح إلى البيانات عند الطلب، أو عندما يحتاج شيء ما خارج تطبيقك إلى إجراء call داخلي. إذا كان بإمكان server component قراءة البيانات أثناء العرض، فدعها تقوم بذلك.

التحدي

متوسط

قم ببناء API صغير واستدعائه من المتصفح.

في app/api/dishes/route.js، قم بتصدير async function GET تُرجع dishes كـ JSON.
في components/DishLoader.jsx، أكمِل loadDishes: قم بعمل fetch لـ /api/dishes، واقرأ جسم الـ JSON، ثم قم بتخزين names الأطباق باستخدام 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>
    );
}