Nextjs
Published in

Nextjs

What is a change in Nextjs 13 Link Component?
What is a change in Nextjs 13 Link Component?

NextJs 13 + Beginner

What is a change in Nextjs 13 Link Component?

The link component is the big frustrating code part in nextjs—the link component help to add two pages in nextjs, like an HTML anchor element. In the old link component, we use <a> warper inside the link component. It is a very weird syntax and has no sense of an anchor wrapper in the link component.

import Link from 'next/link'

// Next.js 12
<Link href="/about">
<a>About</a>
</Link>

In nextjs 13, there is no weirdness in the link component. It is easier, a time saver, and a clean code. you do not wrap with <a> element.

import Link from 'next/link'// Next.js 13
<Link href="/about">
About
</Link>

We discuss common-use props with link component, but there are lots more you can read on nextjs docs.

  1. href
  2. replace
  3. prefetch

href

href used to connect two pages in nextjs. It is similar to the HTML href attribute in the anchor element.

<Link href="/about">
About
</Link>

You can pass a value from one component to the second component with href.

// you can pass query as value,example http://domain.io/tag?name=CSS<Link
href={{
pathname: '/tag',
query: { name: 'CSS' },
}}
>
About
</Link>
=======// you can pass query with dynmic slug,example http://domain.io/blog/what-is-nextjs?<Link
href={{
pathname: '/blog/[slug]',
query: { slug: 'what-is-nextjs?' },
}}
>
Read more
</Link>

replace

Replace props replace your old browser history; replace by default is false.

import Link from 'next/link';

export default function Page() {
return <Link href="/dashboard" replace>Dashboard</Link>;
}

prefetch

Prefetch props help to fetch your page in the background automatically, and it helps to improve web performance. It is by default true.

import Link from 'next/link';

export default function Page() {
return <Link href="/dashboard" prefetch={false}>Dashboard</Link>;
}

Conclusion

Nextjs 13 has many improvements; I like other features, for example, a new font component, improved image component, and middleware, and introduced a new OG Image.

You can share and follow us on Twitter and Linkedin. If you like my work, please read more content on the officialrajdeepsingh. dev, Nextjs, frontendweb, and Sign up for a free newsletter on nextjs

--

--

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store
Rajdeep singh

JavaScript || Reactjs || Nextjs || Python || Rust || Biotechnology || Bioinformatic || Front-end Developer || Writer || https://officialrajdeepsingh.dev/