Cómo funciona la navegación en Next.js

Les recomiendo muchísimo esta extensión de vs code que nos ofrece una forma visual de ver la navegación en Next.Js, espero les sirva de ayuda!! Se llama next.nav, al principio les muestra un “dummy” pero si van al primer botón pequeño de arriba a la derecha, colocan la ruta de su app y les mostrará cómo se ven las rutas de su app

Entonces importando Link salvamos a Zelda? Jeje chiste gamer.

CLASE6 01/03/2024 LINKING AND NAVIGATING

Como el routing y la navegación trabaja?

Existen cuatro formas de navegar entre rutas:

    - <Link> Component
    - <useRouter> hook (client components)
    - <redirect> function (server components)
    - Usando "History API"

LINK COMPONENT

Componente incorporado en Next, similar a <a>, es la opcion recomendada a usar, se puede usar atributos como className.

import Link from 'next/link'

export default function Page() {
  return <Link href="/dashboard">Dashboard</Link>
}

Este componente tiene la siguientes props

Prop	    Example	            Type	            Required
href	    href="/dashboard"   String or Object    Yes
replace	    replace={false}     Boolean	            -
scroll	    scroll={false}      Boolean	            -
prefetch    prefetch={false}    Boolean or null     -

Para saber si un link esta activo se puede usar el hook usePathnamme().
Si desea desplazarse a un id específico en la navegación, puede anexar su URL con un enlace hash # o simplemente pasar un enlace hash a la prop href. Esto es posible ya que <Link> se convierte en un elemento <a>.

    <Link href="/dashboard#settings">Settings</Link>

    // Output
    <a href="/dashboard#settings">Settings</a>

UseRouter

Permite el cambio de rutas mediante codigo desde el lado ‘use Client’.

Redirect

Usado en server components, mediante codigo y condicionales programamos que se rediriga a ciertas rutas.

• Redirect devuelve por defecto un código de estado 307 (Redirección temporal). Cuando se usa en una server action, devuelve un 303, que se usa comúnmente para redirigir a una página de éxito como resultado de una petición POST.
• Redirect genera internamente un error, por lo que debe ejecutarse fuera de los bloques try/catch.
• Redirect puede ser llamado en los Componentes Cliente durante el proceso de renderizado pero no en los manejadores de eventos. Puede utilizar el hook useRouter en su lugar.
• Redirect también acepta URLs absolutas y puede utilizarse para redirigir a enlaces externos.
• Si desea redirigir antes del proceso de renderizado, utilice next.config.js o Middleware.

History API

Existe history.pushState y history.replaceState que son metodos para actualizar la pila del historial del navegador sin recargar la pagina.