Next.js
App Router - Navigation & Prefetch (supplemental)
A short note on <Link> and prefetching. For the full guide to routing, layouts, searchParams, error.tsx → 1. App Router - In Depth.
App Router - Navigation & Prefetch (supplemental)
A short note on <Link> and prefetching. For the full guide to routing, layouts, searchParams, and error.tsx → 1. App Router - In Depth.
Code Splitting per Route
Next.js automatically splits the bundle by route segment - unlike an SPA that loads the whole app on first load.
text
User opens / → only the JS for /
User clicks /products → an extra /products chunk is loaded
<Link> and Prefetching
tsx
import Link from "next/link";
<Link href="/products">Shop</Link>
| Behavior | Details |
|---|---|
| Client navigation | No full page reload |
| Prefetch (production) | Once the link enters the viewport, Next.js prefetches the route in the background |
| Result | Clicks feel almost instant |
Compared to <a href>: a plain <a> always does a full reload (unless you intercept it manually).
When to Use router.push
tsx
"use client";
import { useRouter } from "next/navigation";
const router = useRouter();
router.push("/products?category=smartphones");
Nova: product-toolbar.tsx changes filters by updating the URL's searchParams - this makes state shareable and keeps back/forward navigation correct.
Related in Nova Shop
| Pattern | File |
|---|---|
| Catalog links | navbar.tsx, storefront-hero.tsx |
| URL filters | product-toolbar.tsx + product-filters.ts |
| Dynamic slug | products/[slug]/page.tsx |
Keep reading: 1. App Router - In Depth · 10. Nova Shop Example