Layout Mantığı
Next.js'de layout.tsx dosyası, içindeki tüm sayfaları (children) sarmalar. Header ve Footer'ı buraya ekleyerek her sayfada tekrar tekrar yazmaktan kurtuluruz.
1. Header Bileşeni
components/Header.tsx dosyası oluşturun:
import Link from 'next/link';
export default function Header() {
return (
<header className="border-b py-4 bg-white sticky top-0 z-50">
<div className="max-w-6xl mx-auto px-4 flex justify-between items-center">
<Link href="/" className="text-2xl font-bold">
Blogum
</Link>
<nav className="space-x-6 uppercase text-sm font-medium">
<Link href="/" className="hover:text-blue-600">Ana Sayfa</Link>
<Link href="/blog" className="hover:text-blue-600">Blog</Link>
<Link href="/hakkimizda" className="hover:text-blue-600">Hakkımızda</Link>
</nav>
</div>
</header>
);
}2. Layout.tsx Güncelleme
app/layout.tsx dosyasını açın ve Header'ı ekleyin:
import Header from '@/components/Header';
import './globals.css';
export default function RootLayout({
children,
}: {
children: React.ReactNode
}) {
return (
<html lang="tr">
<body>
<Header />
{children}
<footer className="border-t py-8 text-center text-gray-500">
© {new Date().getFullYear()} Tüm Hakları Saklıdır.
</footer>
</body>
</html>
);
}