Enrutamiento, History API

¿Cómo funciona el enrutamiento con la History API en Next.js?

Next.js te permite usar los métodos nativos window.history.pushState y window.history.replaceState para actualizar la pila de historial del navegador sin recargar la página.

Las llamadas a pushState y replaceState se integran en el Router de Next.js, permitiéndote sincronizar con usePathname y useSearchParams.

window.history.pushState

Úsalo para agregar una nueva entrada a la pila de historial del navegador. El usuario puede navegar de regreso al estado anterior. Por ejemplo, para ordenar una lista de productos:

'use client'

import { useSearchParams } from 'next/navigation'

export default function SortProducts() {
    const searchParams = useSearchParams()

    function updateSorting(sortOrder: string) {
        const params = new URLSearchParams(searchParams.toString())
        params.set('sort', sortOrder)
        window.history.pushState(null, '', `?${params.toString()}`)
    }

    return (
        <>
            <button onClick={() => updateSorting('asc')}>
                Modo Ascendente
            </button>
            <button onClick={() => updateSorting('desc')}>
                Modo Descendente
            </button>
        </>
    )
}

window.history.replaceState

Úsalo para reemplazar la entrada actual en la pila de historial del navegador. El usuario no puede navegar de regreso al estado anterior. Por ejemplo, para cambiar el idioma de la aplicación:

'use client'

import { usePathname } from 'next/navigation'

export function LocaleSwitcher() {
    const pathname = usePathname()

    function switchLocale(locale: string) {
        const newPath = `/${locale}/${pathname}`
        window.history.replaceState(null, '', newPath)
    }

    return (
        <>
            <button onClick={() => switchLocale('en')}>Inglés</button>
            <button onClick={() => switchLocale('es')}>Español</button>
        </>
    )
}

Conclusiones

El enrutamiento con la History API en Next.js ofrece una forma poderosa y flexible de manejar la navegación en aplicaciones web modernas. Al utilizar window.history.pushState y window.history.replaceState, puedes actualizar la URL y el historial del navegador sin recargar la página, mejorando la experiencia del usuario. Estas capacidades se integran perfectamente con el enrutador de Next.js y sus hooks como usePathname y useSearchParams, permitiéndote crear interfaces de usuario dinámicas y reactivas. Aprovecha estas herramientas para construir aplicaciones más fluidas y eficientes.