Обработчики маршрутов

Часть раздела Основы 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. Вы также можете экспортировать 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>
    );
}