Tu primera página

Parte de la sección Esenciales de Next.js del Journey de React de Coddy — lección 3 de 47.

Es hora de editar una página. app/page.jsx es un componente de React ordinario, del mismo tipo que escribiste durante todo el módulo de Fundamentos:

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

Dos pequeñas reglas que nunca cambian:

La página debe ser el export default del archivo: así es como Next.js la encuentra
El nombre del componente depende de ti; solo el nombre del archivo y la carpeta deciden la URL

Fíjate en lo que falta: sin registro de rutas, sin importaciones de un enrutador, sin ReactDOM.render. Escribes un componente en el archivo correcto y se convierte en una página.

Desafío

Principiante

Haz que la página de inicio diga hola.

En app/page.jsx, dentro del <main>, añade un <h1> con id="title".
Su texto debe ser exactamente Welcome to Next.js.

Pruébalo tú mismo

import './globals.css';

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

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