Next.js The Link Component

The Link (next/link) Component

In a production build, if the linked targets of any <Link /> components are statically generated, once in the viewport, the <Link /> components will try to prefetch the linked routes from the Next.js Full Route Cache and add the Server Component Payload to the Router Cache, including the corresponding data fetched by getStaticProps(). Even when the prefetch prop of a <Link /> is set to false, it will not skip the cache permanently. When the user visits the route, the route segment will still be cached client-side inside the Route Cache.

The behaviour can be manipulated by manually calling router.refresh or router.prefetch of the useRouter hook.

On the other hand, server-side rendered (SSR) pages and their data are requested only when the links are clicked.

The next/link component enables client-side navigation. It only updates parts of the page (through partial rendering) and changes the URL when navigating to a different page without resulting in a full page load, made possible by the auto code-splitting feature. Together with prefetching, Next.js makes navigating between pages instant and frictionless. ** The routing system also caches the rendered Server Components in-memory client-side, split by route segments to allow updates at any level.

link component is the primary way to navigate between Next.js routes.

import Link from 'next/link'
 
export default function Page() {
  return <Link href="/dashboard">Dashboard</Link>
}

The NextRequest & NextResponse objects

NextRequest and NextResponse are the Next.js versions of the Request and Response objects from the standard fetch API. They have extension methods for manipulating cookies, redirecting or rewriting responses, and working with middleware using the next() method. The nextUrl object included in next/server provides detailed information about a URL, such as basePath, trailingSlash and locale. NextRequest and NextReponse can be used as the drop-in replacement of their fetch equivalent.

Use cases, tips & tricks

• Use usePathname() to detect if a link is active to add an active CSS class.
• Use #id to scroll the page to a specific location.