Was Next.js ergänzt

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

Du kannst bereits Komponenten mit React erstellen. Warum verwendet also fast jede echte React-App zusätzlich ein Framework?

React allein erledigt nur eine Aufgabe: Deine Komponenten in das zu verwandeln, was auf dem Bildschirm angezeigt wird. Alles andere musst du selbst erstellen:

Seiten und URLs: React hat keine Ahnung, was eine URL ist
Daten abrufen: Du rufst sie im Browser ab, nachdem die Seite bereits geladen wurde
Daten speichern: Du schreibst eine API von Hand

Next.js füllt genau diese Lücken. Seine Antworten sind erfrischend direkt:

Ein Ordner ist eine URL
Komponenten laufen standardmäßig auf dem Server, sodass sie Daten laden können, bevor die Seite überhaupt gesendet wird
Eine Funktion kann Daten speichern, ohne dass eine API geschrieben werden muss

Dieser letzte Punkt verdient eine Pause. In diesem Kurs rufst du Daten mit einem einfachen await innerhalb einer Komponente ab, ohne Ladeindikator und ohne useEffect, weil die Komponente auf dem Server ausgeführt wurde, bevor der Benutzer überhaupt etwas sah.

Alles, was du in den Grundlagen gelernt hast, gilt weiterhin: Es sind dieselben Komponenten, dieselben Props und dasselbe JSX. Next.js ist das Gerüst darum herum.

Aufgabe

Anfänger

Hier ist deine erste Next.js-Seite, die bereits für dich geschrieben wurde.

Das ist zu tun:

Sieh dir an, wo die Datei liegt: app/page.jsx.
Drücke die Schaltfläche Run.
Die Vorschau zeigt diese Seite unter der URL /.

Nichts hat diese Route registriert: Das hat der Ordner erledigt. Darauf baut der gesamte Abschnitt auf.

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>
    );
}