Votre première page

Fait partie de la section L'essentiel de Next.js du Journey React de Coddy — leçon 3 sur 47.

Il est temps de modifier une page. app/page.jsx est un composant React ordinaire, le même genre que ceux que vous avez écrits tout au long des fondamentaux :

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

Deux petites règles qui ne changent jamais :

La page doit être l'export par défaut du fichier (default export) : c'est ainsi que Next.js la trouve
Le nom du composant dépend de vous ; seuls le nom de fichier et le dossier déterminent l'URL

Remarquez ce qui manque : aucune inscription de route, aucun import d'un routeur, aucun ReactDOM.render. Vous écrivez un composant dans le bon fichier, et cela devient une page.

Défi

Débutant

Faites en sorte que la page d'accueil dise bonjour.

Dans app/page.jsx, à l'intérieur du <main>, ajoutez un <h1> avec id="title".
Son texte doit être exactement Welcome to Next.js.

Essayez vous-même

import './globals.css';

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

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