Explicar sobre el enrutamiento en Next.js

Next.js es un marco completo basado en React. A diferencia de una aplicación de reacción tradicional, que carga y presenta toda la aplicación en el cliente, Next.js permite que el servidor muestre la carga de la primera página, lo cual es excelente para el SEO y el rendimiento.

Algunas de las características clave de Next.js son:

• Representación del lado del servidor
• Optimización de imagen
• Generación de sitios estáticos
• Fácil implementación

Puede obtener más información sobre Next.js aquí . En este artículo, aprenderemos sobre el enrutamiento en Next.js. Next.js tiene un sistema de enrutamiento basado en archivos. Cuando se agrega un archivo al directorio de la página de nuestro próximo proyecto, se trata como una ruta. El componente exportado por defecto desde los archivos del directorio de páginas se renderiza cuando accedemos a esa ruta. Por ejemplo, si creamos un archivo llamado home.js en el directorio de páginas, se tratará como una ruta y se podrá acceder visitando http://localhost:3000/home.

Tipos de rutas en Next.js: 

• Rutas de índice: los archivos index.js en nuestro directorio de páginas se enrutan automáticamente al directorio raíz. Por ejemplo: si creamos un archivo en el directorio de páginas llamado index.js. Entonces se puede acceder a él yendo a http://localhost:3000/
• Rutas anidadas: si creamos una estructura de carpetas anidadas, nuestras rutas también se estructurarán de la misma manera. Por ejemplo: si creamos una nueva carpeta llamada usuarios y creamos un nuevo archivo llamado about.js dentro de ella, podemos acceder a este archivo visitando http://localhost:3000/users/about
• Rutas Dinámicas: También podemos aceptar parámetros de URL y crear rutas dinámicas usando la sintaxis de paréntesis. Por ejemplo: si creamos una nueva página en el directorio de páginas llamado [id].js, entonces el componente exportado desde este archivo podría acceder a la identificación del parámetro y representar el contenido en consecuencia. Se puede acceder a esto yendo a localhost:3000/<Any Dynamic Id> .

Vinculación entre diferentes rutas: Next.js nos permite hacer navegación del lado del cliente usando el componente Link. Tiene una propiedad llamada href que apunta a una página conocida.

Ejemplo: Construyamos una nueva aplicación siguiente para ver el enrutamiento en acción. Ejecute el siguiente comando para crear una nueva aplicación siguiente.

npx create-next-app myproject

Cuando abrimos nuestra aplicación en un editor de código, vemos la siguiente estructura de proyecto.

Estructura del proyecto: 

 

Para el alcance de este tutorial, solo nos centraremos en el directorio de páginas . Cuando inicializamos nuestra próxima aplicación, obtenemos una ruta de índice predeterminada . Funciona como una página de inicio para nuestra aplicación. Ahora configuraremos tres rutas diferentes para probar todos los tipos de ruta en Next Js. 

Cree una nueva carpeta llamada usuarios en el directorio de páginas llamado usuarios , luego cree tres archivos nuevos en la carpeta del usuario: [id].js, index.js y about.js. También usaremos el componente Enlace para crear navegación en nuestra página de inicio para acceder a estas rutas.

pages/index.js (http://localhost:3000/):   Primero comenzaremos limpiando un código repetitivo en nuestro archivo pages/index.js y agregaremos tres componentes de enlace para acceder a nuestras rutas.

import React from "react";
import Link from "next/link";
const HomePage = () => {
  
  // This is id for dynamic route, you
  // can change it to any value.
  const id = 1;
  return (
    <>
      <h1>Home Page</h1>
      <ul>
        <li>
          <Link href="/users">
            <a>Users</a>
          </Link>
        </li>
        <li>
          <Link href="/users/about">
            <a>About Users</a>
          </Link>
        </li>
        <li>
          <Link href={`/users/${id}`}>
            <a>User with id {id}</a>
          </Link>
        </li>
      </ul>
    </>
  );
};
  
export default HomePage;

pages/users/index.js (http://localhost:3000/users): esta es una ruta de índice, por lo tanto, el enrutador se vinculará automáticamente a la carpeta raíz que es usuarios.

import React from 'react'
  
const Users = () => {
  return (
    <h1>Users Page</h1>
  )
}
  
export default Users

pages/users/about.js (http://localhost:3000/users/about): esta es una ruta anidada, podemos anidar nuestras rutas en cualquier nivel según nuestra estructura de archivos.

import React from 'react'
  
const Users = () => {
  return (
    <h1>Users About Page</h1>
  )
}
  
export default Users

pages/users/[id].js (http://localhost:3000/users/<id>): esta es una ruta dinámica, y podemos llegar a ella agregando cualquier ID dinámico después de los usuarios. El componente podría acceder a esta identificación dinámica utilizando el enlace useRouter proporcionado por Next Js.

import React from "react";
import { useRouter } from "next/router";
  
const User = () => {
  const router = useRouter();
  return <h1>User with id {router.query.id}</h1>;
};
  
export default User;

Paso para ejecutar la aplicación: Ejecute su aplicación Next.js usando el siguiente comando: 

npm run dev

Producción: