Next.js 6: Linking Between Pages
easy⏱ 5 mincoursenextjs
Link vs a plain anchor tag
A plain <a href="/about"> reloads the entire page from the server — every script re-runs, every bit of client state resets. Next.js's <Link> intercepts the click and does the navigation on the client, keeping your app's JS running and only swapping the page content. It also prefetches linked pages that are visible on screen, so navigation feels instant.
import Link from 'next/link';
function NavBar() {
return (
<nav>
<Link href="/">Home</Link>
<Link href="/about">About</Link>
<Link href="/contact">Contact</Link>
</nav>
);
}
// Clicking these navigates without a full page reload,
// and Next.js prefetches them automatically when they scroll into view.
This sandbox can't run next/link
next/link needs a real Next.js router, which doesn't exist in this in-browser sandbox. Below, we simulate the same UX with useState: clicking a nav item swaps which 'page' component is rendered, no full reload. The real syntax above is what you'd actually ship.
Build a simulated nav
Create a NavBar with three buttons/links (Home, About, Contact) and use useState in App to track which page is active. Render the matching page component below the nav — this is the client-side navigation mental model, minus the real router.