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 cubre exactamente esas carencias. Sus respuestas son refrescantemente directas:

Una carpeta es una URL
Los componentes se ejecutan en el servidor de forma default, por lo que pueden cargar datos antes de que se envíe siquiera la page
Una function puede guardar datos; no hay ninguna API que escribir

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 aplicándose: estos 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 primer page de Next.js, ya escrito para ti.

Qué hacer:

Mira dónde se encuentra el file: app/page.jsx.
Presiona el botón Run.
La vista previa muestra ese page en la URL /.

Nada registró that route: 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>
    );
}