Topic

Link and navigate

Definition

Next.js Link performs client-side navigation to internal routes, while useRouter exposes imperative navigation methods from a Client Component.

In simpler words

Use Link for a normal in-app destination and router methods after a user action decides where to go.

Navigation should preserve the app experience while retaining normal browser behavior for external destinations.

Open live example →

After this you can

Choose Link or useRouter
Link internally without a full document reload
Navigate after a successful user action

Choose declarative or imperative navigation

A link expresses a destination in the UI and remains accessible to keyboard and assistive-technology users. It is the default for navigation menus, breadcrumbs, and item rows.

Imperative navigation belongs in an event handler, for example after a completed create action. Because handlers run in the browser, the component using useRouter needs the use client directive.

Link and router in their roles

import Link from 'next/link';

<Link href="/course/frontend">Frontend path</Link>

'use client';
const router = useRouter();
router.push('/course/frontend/week/1');

The link describes a destination; router.push follows an event-driven decision.

Mistake: using an anchor for an internal route

// Wrong — requests a new document
<a href="/course/frontend">Frontend</a>

// Right — Next manages internal navigation
<Link href="/course/frontend">Frontend</Link>

Use a normal anchor for external URLs, downloads, and intentionally full navigations.

Navigate after state succeeds

Definition

Navigation after a write should follow a confirmed success state, not just a button click.

In simpler words

Do not send a learner to a detail page for a ticket Nest rejected.

Use router.replace when the old history entry should not return users to a completed sign-in or setup step.

Preserve query parameters deliberately when filters or pagination are part of the destination state.

Live playground

Linking and navigating playground

Compare a Link destination with router.push after an event.

Navigation API

Prefetch + client transition for internal routes.

Keep in mind

Prefer Link for visible internal destinations.
Use useRouter only in a Client Component and usually inside an event handler.
Use anchors for external destinations.

Test

Check your understanding

At least 10 questions — mix of concept, syntax, practical, and logic. Score ≥80% (enforced by the API) to save progress.

Checking your session…

15 questions · concept 5 · syntax 3 · practical 4 · logic 3

1. Client navigation component?

Concept

next/navigation <Navigate to="..." />next/router <Router push="..." />next/link <Link href="...">A plain <a href> with prefetch={true} added

2. Programmatic navigation in client components?

Syntax

useRouter().push from next/routerredirect() called inside a click handler from next/navigationuseRouter().push/replace from next/navigationuseNavigate().push from next/navigation

3. Why Link over raw anchor for internal routes?

Practical

Link converts the navigation into a server-side redirectLink fetches the next page’s data and skips rendering itLink disables the browser’s back button for internal routesClient-side transitions + prefetch behavior

4. Dynamic segment href?

Logic

href={{ pathname: "/tickets", params: { id } }}href="/tickets/[id]" with id passed as a separate prophref={`/tickets/${id}`}href={`/tickets?id=${id}`} to hit the dynamic segment

5. replace vs push?

Concept

replace doesn’t add a history entryreplace clears the entire browser history stackreplace navigates back to the previous entryreplace adds an entry but hides it from the back button

6. External URLs?

Practical

Use useRouter().push with the full https URLUse <a> (or Link with care) for full external navigationsUse redirect() from next/navigation with the external URLUse Link with prefetch so the external site loads faster

7. Active link styling?

Syntax

Compare useRouter().asPath to hrefCompare usePathname() to hrefRead the active flag that Link passes to its childrenUse useSearchParams() to detect the current route

8. Prefetch default behavior?

Logic

Link prefetches every link on the page during developmentLink prefetches only after the user hovers the linkLink prefetches the HTML but never the JavaScriptLink can prefetch viewport links in production — be aware of cost

9. Redirect in Server Component/route?

Concept

redirect() from next/navigation for server redirectsuseRouter().push() called at the top of the Server ComponentResponse.redirect() returned from the Server ComponentpermanentRedirect() is the only option in Server Components

10. Which navigation anti-pattern?

Practical

Full reload via window.location for every in-app click without reasonUsing next/link for internal navigation between pagesCalling useRouter().push after a form submits successfullyStyling the active link by comparing usePathname()

11. Why prefer Link over a raw anchor for internal routes?

Conceptintermediate

import Link from 'next/link';
<Link href="/tickets">Tickets</Link>

It sends the navigation through the Nest API for loggingIt rewrites the URL server-side before the browser sees itIt bundles the target page’s CSS into the current pageIt does client-side transitions and can prefetch

12. When is this navigation approach appropriate?

Syntaxintermediate

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

Rendering a static list of navigation links in the headerProgrammatic navigation from client code, e.g. after a successful submitRedirecting from a Server Component after fetching dataReplacing anchor tags for SEO-critical internal links

13. What does this build?

Practicalintermediate

<Link href={'/tickets/' + id}>Open</Link>

A link with id as a query string on /ticketsA link to the dynamic /tickets/[id] routeA link that only works if a static /tickets/[id] page is prebuiltA link to a Route Handler at /tickets/[id]

14. How does replace differ from push?

Logicadvanced

router.replace('/login');

replace navigates without adding a new history entryreplace clears all forward and back history entriesreplace swaps the page content without navigatingreplace re-runs the current route’s data fetch in place

15. Why is this an anti-pattern for internal navigation?

Conceptadvanced

onClick={() => { window.location.href = '/tickets'; }}

It bypasses prefetch but keeps the SPA transitionIt only works in Server Components, not Client ComponentsIt triggers a full page reload instead of a fast client transitionIt skips revalidation, so the new page shows stale data

Checking your session…