🚀 Learn Link & Navigation in Next.js

✅ 1. Link Navigation

📌 next/link allows fast client-side navigation between routes.

⚡ Faster than <a> because it preloads routes automatically.

import Link from "next/link";
<Link href="/">🏠 Home</Link>

✅ 2. Programmatic Navigation using useRouter()

🔹 Dynamically navigate using functions or user events.

🔹 It works only on the client side — so 'use client' is required.

🔹 router.push("/page") → Navigate to a new page
🔹 router.replace("/page") → Navigate without saving history
🔹 router.back() → Go back to previous page

'use client';
import { useRouter } from "next/navigation";
const router = useRouter();

// Method 1
<button onClick={() => router.push('/employee')}>Click</button>

// Method 2
const navigateTo = (path) => {
    router.push(path);
};
<button onClick={() => navigateTo('/static-html-page')}>Go</button>

✅ 3. Navigation with Query Parameters

📌 Example: Navigate to /profile?name=Zohaib

<Link href={{ pathname: '/profile', query: { name: 'Zohaib' } }}>
    👤 Profile
</Link>