Tutorials/NextJS/Getting Started
Lesson

Linking & Navigating

Getting Started/NextJS
Previous TutorialsNext

🔗 Linking & Navigating

Next.js provides fast navigation using server rendering + client-side transitions

⚙️ How Navigation Works

Next.js uses:

  • Server Rendering

  • Prefetching

  • Streaming

  • Client-side transitions

🖥️ Server Rendering

👉 Pages are rendered on the server

Types:

  • Prerendering → build time (fast)

  • Dynamic Rendering → request time

✔ Server sends data → client shows UI

⚡ Prefetching

👉 Loads pages in background before user clicks

plaintext
import Link from 'next/link';

<Link href="/blog">Blog</Link>

✔ Automatic with <Link>
✔ Makes navigation instant

📊 Prefetch Behavior

  • Static routes → fully prefetched

  • Dynamic routes → partially or skipped

🌊 Streaming

Loads page in parts (faster UI)

plaintext
app/dashboard/loading.tsx
plaintext
export default function Loading() {
  return <p>Loading...</p>;
}

✔ Shows loading UI first

✔ Then loads real content

🔄 Client-Side Navigation

👉 No full page reload

✔ Keeps layout
✔ Updates only page content

🚀 Benefits

  • Faster navigation

  • Better user experience

  • No page refresh

  • Smooth transitions

⚠️ Why Navigation Can Be Slow

1. Dynamic routes without loading.tsx

Fix: add loading UI

2. Missing generateStaticParams

Fix: enable static generation

3. Slow network

Use loading indicators

🛑 Disable Prefetch (Optional)

plaintext
<Link href="/blog" prefetch={false}>Blog</Link>

✔ Use when many links (performance optimization)

🧠 Advanced Navigation

🔹 pushState

plaintext
window.history.pushState(null, '', '?sort=asc');

✔ Adds new history entry

🔹 replaceState

plaintext
window.history.replaceState(null, '', '/en/about');

✔ Replaces current history

Previous TutorialsNext