Obsługa tras

Część sekcji Podstawy Next.js ścieżki React w Coddy. Lekcja 37 z 47.

Komponenty serwerowe zaspokajają większość potrzeb związanych z danymi, ponieważ i tak działają na serwerze. Czasami jednak przeglądarka musi poprosić o dane później — po kliknięciu albo po ustabilizowaniu się pola wyszukiwania — a do tego potrzebujesz punktu końcowego, do którego można wysłać żądanie.

Folder zawierający plik route.js staje się dokładnie tym. Ta sama reguła routingu co w przypadku stron, inny plik specjalny:

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

Wewnątrz eksportujesz funkcję nazwaną zgodnie z metodą HTTP:

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

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

Response.json(...) to cała odpowiedź: serializuje wartość i ustawia typ zawartości JSON. Z tego samego pliku możesz też eksportować POST, PUT i DELETE.

Następnie część kliencka to zwykły kod przeglądarki:

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

Dwie rzeczy, o których trzeba pamiętać. Folder może zawierać page.jsx albo route.js, ale nigdy oba te pliki: oba odpowiadałyby za ten sam adres URL. A route.js nie jest komponentem: zwraca Response, a nie JSX.

Sięgnij po obsługę trasy, gdy przeglądarka potrzebuje danych na żądanie lub gdy coś spoza Twojej aplikacji musi się z nią połączyć. Jeśli komponent serwerowy może po prostu odczytać dane podczas renderowania, pozwól mu na to.

Wyzwanie

Średni

Utwórz małe API i wywołaj je z poziomu przeglądarki.

W app/api/dishes/route.js wyeksportuj async function GET, która zwraca dishes jako JSON.
W components/DishLoader.jsx dokończ loadDishes: pobierz dane z /api/dishes, odczytaj treść JSON i zapisz nazwy dań za pomocą setNames.

Po kliknięciu #load-btn element #dish-list musi zostać wypełniony wszystkimi czterema nazwami.

Spróbuj swoich sił

import './globals.css';

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

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