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

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

Attributes of HTML <a> Tag

Attributes of <a> tag in HTML can be used in <Link/> such as className or target="_blank" can be added to <Link> as props and will be passed to the underlying <a> element.