🧱 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