Navegación y diseño (Layout)

Construcción de un diseño unificado

El archivo `layout.tsx` en la raíz de su carpeta `app` actúa como un envoltorio para cada página. Es el lugar perfecto para su barra de navegación y su pie de página.

1. Crear el componente Header

import Link from 'next/link';

export default function Header() {
  return (
    <nav className="border-b py-6">
      <div className="container mx-auto flex justify-between">
        <Link href="/" className="text-xl font-bold">NextWP</Link>
        <div className="space-x-4">
          <Link href="/">Inicio</Link>
          <Link href="/blog">Blog</Link>
        </div>
      </div>
    </nav>
  );
}

2. Actualizar el diseño raíz (Root Layout)

Importe su Header en `app/layout.tsx` y colóquelo encima de la propiedad `{children}`. Ahora, su navegación persistirá de forma instantánea al navegar por las páginas sin necesidad de recargar toda la interfaz de usuario.