nextui
nextui copied to clipboard
Hydration error with navbar and nextjs
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
- Init nextjs project
- Add nextui
- Add navbar
- See console
Expected behavior
I expect no warnings
Screenshots or Videos
No response
Operating System Version
Linux
Browser
Chrome
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.
+1
+1
+1
+1
+1
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>
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>
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>
In the next.js docs, they cover this use-case by providing the
legacyBehavior
andpassHref
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.
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.