Hydration error with navbar and nextjs

[peteole]

trafficstars

Describe the bug

Using the navbar component with links causes a hydration error:

Warning: Prop `className` did not match. Server: "nextui-c-dIWzTP nextui-c-PJLV nextui-c-dIWzTP-hfnKRU-color-default nextui-c-dIWzTP-isWIbj-animated-true nextui-c-PJLV-gulvcB-isFocusVisible-false nextui-c-dIWzTP-ibzThln-css nextui-link nextui-navbar-link" Client: "nextui-c-dIWzTP nextui-c-PJLV nextui-c-dIWzTP-hfnKRU-color-default nextui-c-dIWzTP-isWIbj-animated-true nextui-c-PJLV-gulvcB-isFocusVisible-false nextui-c-dIWzTP-ihuOuWz-css nextui-link nextui-navbar-link"
    at a
    at Styled.a
    at eval (webpack-internal:///./node_modules/@nextui-org/react/esm/link/link.js:17:91)
    at li
    at Styled.li
    at eval (webpack-internal:///./node_modules/@nextui-org/react/esm/navbar/navbar-item.js:16:91)
    at eval (webpack-internal:///./node_modules/@nextui-org/react/esm/navbar/navbar-link.js:12:137)
    at ul
    at Styled.ul
    at eval (webpack-internal:///./node_modules/@nextui-org/react/esm/navbar/navbar-content.js:14:91)
    at div
    at Styled.div
    at nav
    at Styled.nav
    at eval (webpack-internal:///./node_modules/@nextui-org/react/esm/navbar/navbar.js:15:91)
    at Home
    at div
    at $f57aed4a881a3485$var$OverlayContainerDOM (webpack-internal:///./node_modules/@react-aria/overlays/dist/module.js:745:55)
    at $f57aed4a881a3485$export$178405afcd8c5eb (webpack-internal:///./node_modules/@react-aria/overlays/dist/module.js:709:21)
    at $f57aed4a881a3485$export$bf688221f59024e5
    at $704cf1d3b684cc5c$export$9f8ac96af4b1b2ae (webpack-internal:///./node_modules/@react-aria/ssr/dist/module.js:23:64)
    at __webpack_exports__.default.disableBaseline (webpack-internal:///./node_modules/@nextui-org/react/esm/theme/theme-provider.js:15:138)
    at MyApp (webpack-internal:///./pages/_app.js:20:24)
    at ErrorBoundary (webpack-internal:///./node_modules/next/dist/compiled/@next/react-dev-overlay/dist/client.js:8:20742)
    at ReactDevOverlay (webpack-internal:///./node_modules/next/dist/compiled/@next/react-dev-overlay/dist/client.js:8:23635)
    at Container (webpack-internal:///./node_modules/next/dist/client/index.js:111:5)
    at AppContainer (webpack-internal:///./node_modules/next/dist/client/index.js:300:24)
    at Root (webpack-internal:///./node_modules/next/dist/client/index.js:504:25) 

See more info here: https://nextjs.org/docs/messages/react-hydration-error

Your Example Website or App

https://stackblitz.com/edit/nextjs-bnfmrn?file=pages/index.js

Steps to Reproduce the Bug or Issue

1. Init nextjs project
2. Add nextui
3. Add navbar
4. See console

Expected behavior

I expect no warnings

Screenshots or Videos

No response

Operating System Version

Linux

Browser

Chrome

[jeponkz]

I have the same problem. I managed to solve it by replacing

<Navbar.Link> with NextJS <Link>

and the error was gone. The only problem with it is that you can't use the amazing features of NavbarLink, like active menu highlights and cursor highlights.

[willredington]

+1

[EnzoAliatis]

+1

[recallwei]

+1

[khashayarghajar]

+1

[ldmrgrc]

+1

[Xariwey]

I have the same problem. I managed to solve it by replacing

<Navbar.Link> with NextJS <Link>

and the error was gone. The only problem with it is that you can't use the amazing features of NavbarLink, like active menu highlights and cursor highlights.

wrap it in a normal navbar item that way u wont lose the "amazing features of Navbar"

<Navbar.Item>
  <NextLink>
</Navbar.Item>

<Navbar.CollapseItem>
  <NextLink>
</Navbar.CollapseItem>

[Clovel]

I found that @Xariwey 's answer works if you specify the as props as something else than an <a /> component. For example :

<Navbar.Link
  isActive={isLinkActive(nextRouter, '/')}
  as="span"
>
  <NextLink href="/">
    Home
  </NextLink>
</Navbar.Link>

[panathea]

In the next.js docs, they cover this use-case by providing the legacyBehavior and passHref props. This will maintain the navbar styling which the other proposed solutions do not:

            <Link href="/" legacyBehavior passHref>
              <Navbar.Link isActive={router.asPath === "/"}>
                Home
              </Navbar.Link>
            </Link>

[Xariwey]

In the next.js docs, they cover this use-case by providing the legacyBehavior and passHref props. This will maintain the navbar styling which the other proposed solutions do not:

            <Link href="/" legacyBehavior passHref>
              <Navbar.Link isActive={router.asPath === "/"}>
                Home
              </Navbar.Link>
            </Link>

its been a while since i used this, but if remember correctly the issue is that in a normal link u can do that, its actually in the documentation https://nextui.org/docs/components/link#next-js-link , but with navbar.content its expecting a navbar.link or navbar.item as children, otherwise u wont get the features that nextui brings when using those navbar components

p.s. i could be wrong, hope someone can confirm or deny this.

[ztcollazo]

I found that you could use the as prop to make Navbar.Link actually a Next.JS link. For example:

<Navbar.Link as={Link} href="/">Home</Navbar.Link>

Then you can get both the new next link features along with the navbar link features.