馃П Creando el layout global y componentes fijos
Aprende a crear un layout global con encabezado y pie de p谩gina que se repita en todas las p谩ginas.
馃搶 脥ndice de esta entrada:
- 馃搨 Qu茅 es un layout global en Next.js
- 馃彈️ Creando el componente Header
- ⚡ Creando el componente Footer
- 馃寪 Integrando Header y Footer en
layout.tsx - 馃帹 Estilos con Tailwind CSS
- 馃殌 Probando el layout en las p谩ginas existentes
馃搨 Qu茅 es un layout global en Next.js
El layout global permite definir una **estructura base** que se aplicar谩 a todas las p谩ginas de nuestro proyecto. Normalmente contiene: encabezado (Header), pie de p谩gina (Footer) y estilos comunes.
En Next.js 13+, el layout global se define en app/layout.tsx.
馃彈️ Creando el componente Header
Dentro de la carpeta app/components/, crea un archivo llamado Header.tsx:
import Link from 'next/link';
export default function Header() {
return (
<header className="bg-blue-600 text-white p-4 text-center">
<h1 className="text-xl font-bold">Mi Blog con Next.js</h1>
<nav className="mt-2">
<Link href="/" className="mx-2 hover:underline">Inicio</Link>
<Link href="/about" className="mx-2 hover:underline">Acerca</Link>
</nav>
</header>
);
}
Este Header se ver谩 en todas las p谩ginas una vez integrado en el layout global.
馃寪 Integrando Header y Footer en layout.tsx
Abre el archivo app/layout.tsx y modifica el contenido para incluir los componentes globales:
import './globals.css'
import Header from './components/Header'
import Footer from './components/Footer'
export default function RootLayout({ children }: { children: React.ReactNode }) {
return (
<html lang="es">
<body className="flex flex-col min-h-screen">
<Header />
<main className="flex-grow">
{children}
</main>
<Footer />
</body>
</html>
)
}
Nota: La clase flex flex-col min-h-screen asegura que el Footer se mantenga al final de la p谩gina.
馃帹 Estilos con Tailwind CSS
Usamos clases de Tailwind CSS para colores, tipograf铆a y espaciado en Header y Footer. Si quieres personalizar, simplemente cambia las clases seg煤n tus preferencias.
馃殌 Probando el layout en las p谩ginas existentes
Arranca tu servidor de desarrollo:
npm run dev
Abre http://localhost:3000 y http://localhost:3000/about para ver tu Header y Footer fijos en todas las p谩ginas 馃帀
0 Comentarios
Si desea contactar comigo, lo puede hacer atravez deste formulario gracias