Qué añade Next.js

Parte de la sección Esenciales de Next.js del Journey de React de Coddy. Lección 1 de 47.

Ya puedes crear componentes con React. Entonces, ¿por qué casi todas las aplicaciones reales de React usan un framework además?

Porque React, por sí solo, solo hace una cosa: convertir tus componentes en lo que aparece en pantalla. Todo lo demás lo construyes tú:

Páginas y URL: React no tiene idea de qué es una URL
Obtener datos: los obtienes en el navegador, después de que la página ya se ha cargado
Guardar datos: escribes una API manualmente

Next.js llena exactamente esos vacíos. Sus respuestas son refrescantemente directas:

Una carpeta es una URL
Los componentes se ejecutan en el servidor de forma predeterminada, por lo que pueden cargar datos antes de que la página se envíe
Una función puede guardar datos, sin necesidad de escribir una API

Ese último punto merece una pausa. En este curso obtendrás datos con un await simple dentro de un componente, sin un indicador de carga y sin useEffect, porque el componente se ejecutó en el servidor antes de que el usuario viera algo.

Todo lo que aprendiste en Fundamentos sigue siendo válido: son los mismos componentes, las mismas props y el mismo JSX. Next.js es la estructura que los rodea.

Desafío

Principiante

Aquí tienes tu primera página de Next.js, ya escrita para ti.

Qué hacer:

Observa dónde se encuentra el archivo: app/page.jsx.
Presiona el botón Run.
La vista previa muestra esa página en la URL /.

Nada registró esa ruta: lo hizo la carpeta. Esa es la idea en la que se basa toda la sección.

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