Link in Nextjs using next/link component

Nextjs extends the HTML <a> element with additional features to provide prefetching and client side navigation between routes, next/link is a react component.

Prefetching will load the data of the links which are visible in the browser viewport or it will load the data when hover on the link which make smooth page transition.

Example of Nextjs Link Component

1import Link from 'next/link'
2 
3export default function Page() {
4  return <Link href="/mypage">Dashboard</Link>
5}

Required Props in Nextjs Link

href: URL or Path to navigate too, value can either String or Object.

Pass query params in Nextjs Link

Here in this example, object is passed a props to href, url path is mentioned in pathname key and the query params can be added as object to query key.

1// Navigate to /home?value=test
2<Link
3  href={{
4    pathname: '/home',
5    query: { 
6      value: 'test'
7    },
8  }}
9>
10  Home
11</Link>

Optional Props in Nextjs Link

replace: When true, next/link will replace the current history state instead of adding a new URL into the browser’s history stack, defaults value is false.
scroll: By default<Link> will scroll to the top of a new route or to maintain the scroll position for backwards and forwards navigation. When value is set to false, next/link will not scroll to the top of the page after a navigation, defaults value is true.
prefetch: Defaults value is true, when using the <Link> component it will preload the content of the links, this is useful for improving the performance of client side navigations, any <Link/> in the viewport will be preloaded when they are visible in screen. Prefetch can be disabled by passing false to prefetch prefetch={false}.

Attributes of HTML `<a>` Tag