✳flâneur — a map of the web's best reading

Routing: Linking and Navigating | Next.js

nextjs.org · 1,830 words · saved by 1 readers

This page will go through how to use each of these options, and dive deeper into how navigation works. is a built-in component that extends the HTML tag to provide prefetching and client-side navigation between routes. It is the primary and recommended way to navigate between routes in Next.js. You can use it by importing it from next/link, and passing a href prop to the component: There are other optional props you can pass to . See the API reference for more. When linking to dynamic segments, you can use template literals and interpolation to generate a list of links. For example, to generate a list of blog posts: You can use usePathname() to determine if a link is active. For example, to add a class to the active link, you can check if the current pathname matches the href of the link: The default behavior of the Next.js App Router is to scroll to the top of a new route or to maintain the scroll position for backwards and forwards navigation. If you'd like to scrol

This page is also available as Markdown at /docs/app/getting-started/linking-and-navigating.md . For an index of Next.js documentation , see /docs/llms.txt . Copy page Linking and Navigating Last updated June 23, 2026 In Next.js, routes are rendered on the server by default. This often means the client has to wait for a server response before a new route can be shown. Next.js comes with built-in prefetching , streaming , and client-side transitions ensuring navigation stays fast and responsive. This guide explains how navigation works in Next.js and how you can optimize it for dynamic routes a

Explore this link on the map →

related reading