Lección 05. Ruteo Básico.

Next.js tiene una estructura requerida para el manejo de rutas de un proyecto.

Para el entendimiento de esta clase, ELIMINAREMOS el directorio App/ de nuestro proyecto creado.

Recuerda, el directorio App/ dentro contenía:

• favicon.ico

• globals.css

• layout.tsx

• page.tsx

Nota: Para eliminar un directorio, puedes utilizar el comando rm -r.

Reglas básicas en Ruteo de Next.js._

Para la creación de rutas dentro de Next.js, se deben seguir una serie de reglas.

1. Para la creación de cualquier ruta, debe encontrarse dentro de la carpeta src/App.

2. El "Home" o lo que conocemos como "index.html", dentro de Next.js deberá ser nombrada como page.jsx, page.tsx o page.js.

3. Al momento de la compilación de un proyecto con "page", Next.js creará el archivo layout.tsx, el cual importa el page como Children.

4. Para la creación de rutas en proyecto, debemos crear un directorio (con nombre a gusto) dentro de app/ y dentro un "page", generando de esa manera una nueva ruta de renderizado.

5. Podemos manejar perfectamente la anidación de rutas generando dentro de directorios de rutas otros directorios secundarios con su propio "page" a renderizar.

Veamos de manera mas entendible cada regla:

Regla 1. Para la creación de cualquier ruta, debe encontrarse dentro de la carpeta src/app._

Recordemos la estructura principal de un proyecto de Next.js es:

|- .next/
|-node-modules/
|-public/
|-src/
  |-app/
|- ...Otros archivos...

De manera que para que exista una ruta dentro de nuestro proyecto, como regla 1, el archivo (.tsx, .jsx, .js) deberá encontrarse dentro del directorio src/app/.

Por ejemplo, nuestro proyecto base al momento de crearse, tenia la estructura siguiente:

|- .next/
|-node-modules/
|-public/
|-src/
  |-app/
    |-layout.tsx
    |-page.tsx
|- ...Otros archivos...

Nota: Recuerda, el contenido renderizado en / es el contenido dentro del page.

Regla 2. El "Home" o lo que conocemos como "index.html", dentro de Next.js deberá ser nombrada como "page.jsx", "page.tsx" o "page.js"._

Así como en servidores de Apache, el archivo raíz era nombrado index.html (o en su variación index.php), para Next.js, este archivo es llamado page.tsx (o alguna variación como "page.jsx", "page.tsx" o "page.js").

Recordemos, que en nuestra estructura básica al inicio era:

|- .next/
|-node-modules/
|-public/
|-src/
  |-app/
    |-layout.tsx
    |-page.tsx
|- ...Otros archivos...

El archivo page.tsx (u otra variación) representa el renderizado de /, mientras que el layout.jsx, es una plantilla de renderizado, la cual podríamos eliminar (mas adelante, en el siguiente paso hablaremos de ello).

Nota: Cada que veas un archivo page.tsx (o alguno con extensión similar), es el archivo principal renderizado dentro de un directorio.

Regla 3. Al momento de la compilación de un proyecto con "page", Next.js creará el archivo layout.tsx, el cual importa el page como Children._

Como hablamos a corto en el punto anterior, el archivo page.tsx es el encargado de renderizar contenido de rutas y directorios.

Pero, el layout.tsx es el encargado de importar metadatos y plantilla a un page.tsx, útil para la búsqueda de CEO entre navegadores.

Recuerda, un layout.jsx básico es:

// Se exporta un objeto 'metadata' que contiene información sobre la página,
// como el título y la descripción. Esto es útil para SEO y para configurar metadatos en Next.js.
export const metadata = {
  title: 'Next.js',                  // Título de la página
  description: 'Generated by Next.js', // Descripción que puede usarse en <meta>
}

// Se define un componente React funcional llamado 'RootLayout' que se exporta por defecto.
// Este componente se usa como layout base para todas las páginas en Next.js (generalmente en 'app/layout.tsx').
export default function RootLayout({
  children, // Se recibe una propiedad 'children' que representa el contenido hijo que se renderizará dentro del layout.
}: {
  children: React.ReactNode // Se especifica el tipo de 'children' como React.ReactNode (puede ser texto, elementos, componentes, etc.)
}) {
  return (
    // Se retorna un documento HTML básico con etiqueta <html> y <body>
    <html lang="en">        {/* Define el idioma de la página como inglés */}
      <body>{children}</body> {/* Inserta el contenido hijo dentro del <body> */}
    </html>
  )
}

Nota: Podemos hacer la prueba, eliminando el archivo layout.tsx y al levantar el servidor de nuestro proyecto, Next.js creará de nuevo un layout.tsx.

Regla 4. Para la creación de rutas en proyecto, debemos crear un directorio (con nombre a gusto) dentro de app/ y dentro un "page.tsx", generando de esa manera una nueva ruta de renderizado._

A diferencia de la librería de React.js, el framework de Next.js tiene un sistema de enrutado de directorios web.

Para ello, el sistema funciona de la siguiente manera:

1. Dentro de src/app crear un directorio a nombre de la ruta que deseemos en nuestro proyecto.

2. Dentro del nuevo directorio, crear un nuevo archivo llamado page.tsx (o alguna variación page.jsx, page.js), el cual será el responsable de renderizar dentro de la ruta.

Por ejemplo, si tenemos la siguiente estructura:

|- .next/
|-node-modules/
|-public/
|-src/
  |-app/
    |-layout.tsx
    |-page.tsx
    |-contacts/
      |-page.tsx
    |-about-us
      |-page.tsx
|- ...Otros archivos...

Podremos acceder a los directorios:

/

/contacts

/about-us

Donde cada uno de ellos, renderizará el contenido dentro de su respectivo page.tsx.

Puedes hacer el ejemplo, creando la estructura y colocando el código a cada ``page.tsx`` como el siguiente:

en el page de app/contacts:

export default function Contacts () {
  return (
    <h1>Contacts</h1>
  );
}

en el page de app/about-us:

export default function Aboutus () {
  return (
    <h1>About us</h1>
  );
}

Nota: El layout.tsx solo es realmente necesario en el page.tsx principal.

Regla 5. Podemos manejar perfectamente la anidación de rutas generando dentro de directorios de rutas otros directorios secundarios con su propio ``"page.tsx"`` a renderizar._

Si dentro de una ruta queremos tener una nueva ruta anidada dentro de ella, es tan simple como:

1. Entrar en el directorio creado donde crearemos un nuevo subdirectorio.

2. Crear su page.tsx respectivo.

¡Así de simple!

Poniendo de ejemplo la estructura:

|- .next/
|-node-modules/
|-public/
|-src/
  |-app/
    |-layout.tsx
    |-page.tsx
    |-contacts/
      |-page.tsx
      |-contact-1/
        |-page.tsx
      |-contact-2/
        |-page.tsx
    |-about-us
      |-page.tsx
|- ...Otros archivos...

Entonces, hemos agregado los nuevos directorios:

/contacts/contact-1

/contacts/contact-2