Route-Handler

Teil des Abschnitts Next.js Essentials der React-Journey von Coddy — Lektion 37 von 47.

Server-Komponenten decken die meisten Datenbedürfnisse ab, da sie bereits auf dem Server laufen. Aber manchmal muss der Browser Daten erst später anfragen, nach einem Klick, nachdem sich ein Suchfeld beruhigt hat, und dafür benötigen Sie einen Endpunkt, den Sie aufrufen können.

Ein Ordner mit einer route.js darin wird genau dazu. Dieselbe Routing-Regel wie bei Seiten, aber eine andere spezielle Datei:

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

Im Inneren exportieren Sie eine Funktion, die nach der HTTP-Methode benannt ist:

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

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

Response.json(...) ist die gesamte Antwort: Es serialisiert den Wert und setzt den JSON-Content-Type. Sie können auch POST, PUT, DELETE aus derselben Datei exportieren.

Dann ist die Client-Hälfte gewöhnlicher Browser-Code:

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

Zwei Dinge, die Sie beachten sollten. Ein Ordner kann eine page.jsx oder eine route.js enthalten, niemals beides: Beide würden dieselbe URL beanspruchen. Und route.js ist keine Komponente: Es gibt eine Response zurück, kein JSX.

Verwenden Sie einen Route Handler, wenn der Browser Daten auf Anfrage benötigt oder wenn etwas außerhalb Ihrer App aufgerufen werden muss. Wenn eine Serverkomponente die Daten einfach beim Rendern lesen kann, lassen Sie sie das tun.

Aufgabe

Mittel

Baue eine kleine API und rufe sie aus dem Browser auf.

Exportiere in app/api/dishes/route.js eine async function GET, die dishes als JSON zurückgibt.
Vervollständige in components/DishLoader.jsx die Funktion loadDishes: Rufe /api/dishes ab (fetch), lies den JSON-body ein und speichere die dish-names mit setNames.

Ein Klick auf #load-btn muss #dish-list mit allen vier Namen füllen.

Probier es selbst

import './globals.css';

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

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