Deine erste Seite

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

Zeit, eine Seite zu bearbeiten. app/page.jsx ist eine gewöhnliche React-Komponente, genau wie die, die Sie in den Grundlagen geschrieben haben:

export default function Home() {
    return (
        <main>
            <h1>Welcome!</h1>
        </main>
    );
}

Zwei kleine Regeln, die sich nie ändern:

Die Seite muss der default export der Datei sein: So findet Next.js sie
Der Name der Komponente bleibt Ihnen überlassen; nur der Dateiname und Ordner bestimmen die URL

Beachten Sie, was fehlt: keine Routen-Registrierung, keine Importe eines Routers, kein ReactDOM.render. Sie schreiben eine Komponente in der richtigen Datei, und sie ist eine Seite.

Aufgabe

Anfänger

Sorge dafür, dass die Startseite Hallo sagt.

Füge in app/page.jsx innerhalb von <main> ein <h1> mit id="title" hinzu.
Der Text muss exakt Welcome to Next.js lauten.

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