Error: Hydration failed because the initial UI does not match what was rendered on the server when using Link element

Question

I just got started learning Next.js, and I came across a component called <Link/> for routing between different pages, but I use the react-bootstrap library for the navbar; this library provides Nav.Link, and this component does the same job as Link component.

Should I use only the Link or Nav.Link? When I tried to put the Link inside the Nav.Link component, it gives me:

Unhandled Runtime Error Error: Hydration failed because the initial UI does not match what was rendered on the server.

And thank you for your time to read my question.

Answer 1

In Next.js version 13, Link is a wrapper around the HTML <a> element, as you can read on the official documentation:

<Link> is a React component that extends the HTML <a> element to provide prefetching and client-side navigation between routes. It is the primary way to navigate between routes in Next.js.

And Nav.Link from react-boostrap render by default an HTML <a> as well. So you end up having two nested <a>, which is incorrect.

For redirecting in Next.js, prefer using Link from Next.js. If you want to use Nav.Link from react-bootstrap for styling purposes, you could use the as property, like so:

<Nav.Link as="span">
  <Link href={"/about"}>About</Link>
</Nav.Link>