Navigation and Layout

Building a Unified Layout

The `layout.tsx` file in the root of your `app` folder acts as a wrapper for every page. This is the perfect place for your Navigation bar and Footer.

1. Create the Header Component

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="/">Home</Link>
          <Link href="/blog">Blog</Link>
        </div>
      </div>
    </nav>
  );
}

2. Update Root Layout

Import your Header into `app/layout.tsx` and place it above the `{children}` prop. Now, your navigation will persist instantly as you click through pages without reloading the entire UI.