Principio fundamental del funcionamiento del framework NextJS

En lecciones anteriores, instalamos el framework NextJS y nos familiarizamos con su estructura básica. Es hora de ponernos a trabajar en lo principal.

La parte principal de NextJS es el enrutamiento (routing). El enrutamiento funciona así: cuando un usuario ingresa una URL en la barra de direcciones del navegador, el framework NextJS entregará al navegador un archivo específico, correspondiente a esa URL.

El enrutamiento en NextJS está organizado de una manera especial. Su esencia consiste en que a cada URL solicitada le corresponde una carpeta dentro de src/app.

Además, dentro de la carpeta debe haber un archivo con el nombre page.jsx. Precisamente este archivo será el que se entregue al navegador. Y en este archivo escribiremos código en JSX, mientras que al navegador se enviará el código HTML listo de la página.

Veamos un ejemplo. Supongamos que queremos que en la URL /test/ se muestre un determinado texto.

Creemos la carpeta correspondiente: src/app/test. Dentro de esta carpeta, creemos el archivo page.jsx con el siguiente contenido:

src/app/test/page.jsxexport default function Test() {
  return <h1>hello, user!</h1>;
}

Abra en el navegador nuestra URL: /test. Y verá el texto escrito por nosotros dentro del archivo JSX.

Intente cambiar el texto y guardar el archivo. Después de esto, el texto automáticamente cambiará también en el navegador. Así funciona NextJS en modo de desarrollo.