Navegación y enlaces en Next.js App Router

Por qué es necesario: problemática y contexto arquitectónico#

En las aplicaciones multipágina tradicionales (MPA), hacer clic en un enlace estándar <a href="..."> inicia un ciclo de red completo: el navegador solicita un documento HTML nuevo, destruye el DOM activo y vuelve a descargar y ejecutar todos los scripts y estilos. Esto provoca la pérdida del contexto del usuario (reproductores multimedia en ejecución, estados de formularios no guardados, diálogos abiertos) y degrada las métricas de Core Web Vitals (particularmente Interaction to Next Paint, INP).

Next.js App Router implementa una arquitectura híbrida de enrutamiento. Las transiciones de página se ejecutan como navegación suave (Soft Navigation): el navegador no recarga la página completa y el enrutador del cliente solicita solo el árbol de React Server Components modificado (RSC Flight Stream), conservando los layouts padres y el estado interactivo.

En combinación con un mecanismo inteligente de Prefetching (precarga) y una caché en memoria optimizada, se logran transiciones de pantalla con latencia percibida casi nula (0 ms).

Modelo mental: Subtree Reconciliation y Router Cache#

La arquitectura de navegación en Next.js 15+ y React 19 se sustenta en cuatro mecanismos fundamentales:

1. Subtree Reconciliation (Reconciliación de subárboles): Al navegar entre /dashboard/analytics y /dashboard/settings, el layout raíz y el armazón del panel de control no se vuelven a renderizar. Únicamente se actualiza el slot hoja children.
2. Client Router Cache: Almacenamiento operativo en la memoria del navegador que conserva los segmentos de página precargados.
3. Adaptive Prefetching (Precarga adaptativa): Descarga automática en segundo plano de los segmentos cuando un enlace entra en el área visible (viewport) mediante la API Intersection Observer.
4. Navegación con transiciones (useTransition): Ejecución no bloqueante de transiciones programáticas en React 19, preservando la capacidad de respuesta ante respuestas lentas del servidor.

Ciclo de vida y ejecución en tiempo de ejecución (Runtime Execution)#

Sintaxis y API: transiciones declarativas y programáticas#

1. Navegación declarativa mediante <Link>#

El componente <Link> de next/link amplía la etiqueta nativa <a> con precarga automatizada y navegación suave en el cliente:

import Link from 'next/link';

export function NavBar() {
  return (
    <nav className="flex gap-4 p-4 border-b border-border text-sm">
      {/* prefetch={null} (predeterminado): precarga adaptativa de estáticos y esqueletos */}
      <Link href="/dashboard" className="hover:text-accent-violet transition-colors">
        Panel de control
      </Link>

      {/* prefetch={true}: fuerza la precarga completa de todo el árbol */}
      <Link href="/analytics" prefetch={true} className="hover:text-accent-violet transition-colors">
        Analítica
      </Link>

      {/* scroll={false}: navega sin reiniciar el scroll hacia arriba (ideal para pestañas y paginación) */}
      <Link href="/settings?tab=security" scroll={false} className="hover:text-accent-violet transition-colors">
        Configuración de seguridad
      </Link>
    </nav>
  );
}

2. Navegación programática con useRouter() y useTransition en React 19#

En los Client Components, la navegación programática se lleva a cabo mediante el hook useRouter(). En React 19 se recomienda integrarlo con useTransition para gestionar un estado de carga no bloqueante (isPending):

'use client';

import { useRouter } from 'next/navigation';
import { useTransition } from 'react';

export function CategoryFilter() {
  const router = useRouter();
  const [isPending, startTransition] = useTransition();

  const handleSelect = (category: string) => {
    // Transición no bloqueante: la interfaz no se congela al descargar el payload de RSC
    startTransition(() => {
      router.push(`/catalog?category=${category}`, { scroll: false });
    });
  };

  return (
    <div className="flex items-center gap-2">
      <button
        onClick={() => handleSelect('laptops')}
        disabled={isPending}
        className="px-3 py-1.5 rounded bg-bg-elevated border border-border text-xs disabled:opacity-50"
      >
        {isPending ? 'Cargando...' : 'Portátiles'}
      </button>
    </div>
  );
}

3. Redirecciones del lado del servidor: redirect() y permanentRedirect()#

En Server Components, Route Handlers y Server Actions, las redirecciones se ejecutan mediante funciones de servidor dedicadas que emiten interrupciones controladas:

import { redirect } from 'next/navigation';

async function getSession() {
  return null; // Usuario no autenticado
}

export default async function DashboardPage() {
  const session = await getSession();

  if (!session) {
    // Emite NEXT_REDIRECT y devuelve HTTP 307
    redirect('/login?from=/dashboard');
  }

  return <div>Panel Privado Seguro</div>;
}

Patrones prácticos: organización arquitectónica#

Patrón 1: Navegación por pestañas preservando la posición del scroll#

Al alternar pestañas o filtros con parámetros de búsqueda, el salto involuntario del scroll hacia (0, 0) perjudica la experiencia de usuario. La opción scroll={false} soluciona este comportamiento:

'use client';

import Link from 'next/link';
import { useSearchParams } from 'next/navigation';

export function DashboardTabs() {
  const searchParams = useSearchParams();
  const currentTab = searchParams.get('tab') ?? 'overview';

  return (
    <div className="flex border-b border-border space-x-4">
      {['overview', 'logs', 'metrics'].map((tab) => (
        <Link
          key={tab}
          href={`/dashboard?tab=${tab}`}
          scroll={false} // Evita el salto no deseado del viewport hacia arriba
          className={`pb-2 text-sm capitalize transition-colors ${
            currentTab === tab
              ? 'border-b-2 border-accent-violet font-semibold text-text-primary'
              : 'text-text-muted hover:text-text-primary'
          }`}
        >
          {tab}
        </Link>
      ))}
    </div>
  );
}

Errores comunes: fallos de borde y consideraciones de diseño#

Preguntas de entrevista: Nivel Staff / Lead#