Navegación entre rutas en Next.js

Next.js es un potente marco de trabajo que nos ayuda a construir aplicaciones web rápidas y eficientes. En este artículo, exploraremos algunas características útiles que nos permiten navegar y optimizar la navegación en nuestras aplicaciones.

El componente Link 🖇️

El componente Link es similar al tag <a> en HTML y se encuentra en el módulo next/link. Este componente nos permite realizar enrutamiento del lado del cliente (client-side).

Ejemplo:

<Link href="/settings">
  <a>settings</a>
</Link>

Asegúrate de incluir el tag <a> dentro del componente Link y omitir la propiedad href en el tag <a>, ya que debe vivir dentro del componente Link.

Para las rutas dinámicas, utiliza la propiedad as:

<Link href="/user/[id].js" as={`/user/${user.id}`}>
  <a>user</a>
</Link>

Creando una aplicación de notas 📝

A continuación, veamos cómo podemos enlazar nuestras páginas en una aplicación de notas utilizando el componente Link:

pages/notes/[id].jsx

// Importa la biblioteca 'React' para utilizar sus funcionalidades en este componente
import React from 'react'

// Importa el hook 'useRouter' de la biblioteca 'next/router' para acceder al objeto del enrutador
import { useRouter } from 'next/router'

// Importa el componente 'Link' de 'next/link' para navegar entre páginas en una aplicación Next.js
import Link from 'next/link'

// Exporta una función anónima como componente predeterminado
export default () => {
  // Utiliza el hook 'useRouter' para obtener una instancia del enrutador de Next.js
  const router = useRouter()

  // Extrae la propiedad 'id' del objeto 'query' del enrutador para acceder al valor de 'id' en la ruta actual
  const { id } = router.query

  // Devuelve el JSX del componente que se mostrará en la página
  return (
    // Contenedor principal del componente
    <div>
      // Título que muestra el valor de 'id' obtenido de la ruta
      <h1>Note: {id} </h1>

      // Componente 'Link' que envuelve un elemento 'a' para proporcionar una navegación eficiente entre páginas
      <Link href="/notes">
        // Elemento 'a' que actúa como enlace para navegar a la página de 'notes'
        <a>Notes</a>
      </Link>
    </div>
  )
}

pages/notes/index.jsx

// Importa la biblioteca 'React' para utilizar sus funcionalidades en este componente
import React from 'react'

// Importa el componente 'Link' de 'next/link' para navegar entre páginas en una aplicación Next.js
import Link from 'next/link'

// Exporta una función anónima como componente predeterminado
export default () => {
  // Crea un arreglo de 15 objetos 'note' con propiedades 'id' y 'title'
  const notes = new Array(15).fill(1).map((e, i) => ({id: i, title: `Note: ${i}`}))

  // Devuelve el JSX del componente que se mostrará en la página
  return (
    // Contenedor principal del componente
    <div>
      // Título de la página
      <h1>Notes</h1>

      // Itera sobre el arreglo de notas y devuelve un elemento 'div' por cada nota
      {notes.map(note => (
        // Contenedor de la nota individual
        <div>
          // Componente 'Link' que envuelve un elemento 'a' y proporciona una navegación eficiente entre páginas
          <Link key={note.id} href="/notes/[id]" as={`/notes/${note.id}`}>
            // Elemento 'a' que actúa como enlace para navegar a la página de la nota con el 'id' correspondiente
            <a>
              // Título de la nota en negrita
              <strong>{note.title}</strong>
            </a>
          </Link>
        </div>
      ))}
    </div>
  )
}

pages/index.jsx

import React from 'react'import Link from 'next/link'export default () => (
  <div><h1>Index page</h1><Link href="/notes"><a>Notes</a></Link></div> 
)

Cambiando de rutas desde Javascript 🔄

Cuando necesitamos cambiar de rutas desde nuestro código Javascript en lugar de usar el componente Link, podemos utilizar el objeto router y su método push para realizar enrutamiento programático.

Ejemplo:

// Importa la biblioteca 'React' para utilizar sus funcionalidades en este componente
import React from 'react'

// Importa el hook 'useRouter' de la biblioteca 'next/router' para acceder al objeto del enrutador
import { useRouter } from 'next/router'

// Exporta una función anónima como componente predeterminado
export default () => {
  // Utiliza el hook 'useRouter' para obtener una instancia del enrutador de Next.js
  const router = useRouter()

  // Define la constante 'id' con un valor de 2
  const id = 2

  // Devuelve el JSX del componente que se mostrará en la página
  return (
    // Contenedor principal del componente
    <div>
      // Botón que maneja el evento 'onClick' para navegar a la página de inicio '/'
      <button onClick={e => router.push('/')}>
        Go Home
      </button>

      // Botón que maneja el evento 'onClick' para navegar a la página de 'Dashboard' con el 'id' correspondiente
      <button onClick={e => router.push('/user/[id]', `/user/${id}`)}>
        Dashboard
      </button>
    </div>
  )
}

Conclusiones 🎓

1. El componente Link nos permite realizar enrutamiento del lado del cliente en nuestras aplicaciones Next.js, utilizando un enfoque similar al tag <a> en HTML.
2. Para enlazar rutas dinámicas, debemos usar la propiedad as dentro del componente Link.
3. El objeto router y su método push nos permiten realizar enrutamiento programático, cambiando las rutas directamente desde nuestro código Javascript.

Ejercicios para practicar 💡

1. Crea una aplicación Next.js básica con al menos tres páginas diferentes (por ejemplo, Inicio, Acerca de y Contacto) e implementa la navegación utilizando el componente Link.
2. Agrega una ruta dinámica a tu aplicación, como /products/[id], y crea enlaces a diferentes productos utilizando la propiedad as del componente Link.
3. Implementa enrutamiento programático en tu aplicación utilizando el objeto router y su método push. Por ejemplo, crea un formulario de búsqueda y navega a una página de resultados de búsqueda basada en la entrada del usuario.

Resumen en 3 puntos 📌

1. El componente Link de Next.js facilita la navegación y optimización del enrutamiento en aplicaciones web, permitiendo enrutamiento del lado del cliente.
2. Las rutas dinámicas se gestionan utilizando la propiedad as dentro del componente Link, lo que permite crear enlaces flexibles basados en variables.
3. El enrutamiento programático se puede lograr mediante el objeto router y su método push, brindando una mayor flexibilidad al cambiar rutas desde el código Javascript.

Espero que este artículo te haya sido útil para comprender cómo funciona la navegación y la optimización en Next.js. Si tienes alguna pregunta, opinión o deseas agregar algo, no dudes en dejar un comentario a continuación. Y si te gustó este artículo, ¡no olvides compartirlo en tus redes sociales! 😊