Knowledgebase

Routing and Navigation in Next.js Print

  • frontenddevelopment, frontend, guide, howto, solution, zillionkinghost, hosting, support
  • 0

Moving between views.

HOW ROUTING WORKS

Determined by the file structure, rather than configuration.

WHAT THAT PROVIDES

Predictability, and no routing configuration to maintain.

WHAT DYNAMIC ROUTES ARE

Paths with variable segments, matching many addresses.

WHAT TO BE CAREFUL WITH

Routes that shadow each other Catch-all routes matching more than intended

WHAT LAYOUTS PROVIDE

Structure shared across routes, without re-rendering on navigation.

WHY THAT MATTERS

State within a layout persists between pages.

WHAT NAVIGATION SHOULD USE

The framework's link component, not plain anchors, for internal navigation.

WHY

It enables prefetching and avoids a full page load.

WHAT TO STILL PROVIDE

Real addresses.

WHY

So links can be opened in new tabs, shared and indexed.

WHAT TO HANDLE

Loading states during navigation Errors within a route Not-found cases

WHAT TO CHECK

That the browser's back and forward behave correctly That scroll position is handled sensibly

WHAT TO TEST

Navigating directly to a deep route, rather than reaching it through the application.


Was this answer helpful?
Back

Are you happy with your experience? Leave us a review on Trustpilot.


Trustpilot