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 page überhaupt gesendet wird
Eine function kann Daten speichern, es muss keine API geschrieben werden

That letzte Punkt verdient eine Pause. In diesem Kurs rufst du Daten mit einem einfachen await innerhalb einer component ab, ohne Ladeanimation und ohne useEffect, weil die component auf dem Server ausgeführt wurde, bevor der Benutzer irgendetwas sehen konnte.

Alles, was du in Fundamentals 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.

Was zu tun ist:

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

Nichts hat diese route registriert: Der FOLDER hat es getan. 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>
    );
}