Error: Hydration failed because the initial UI does not match what was rendered on the server when u-CodePudding

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.

CodePudding user response：

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>