Hydration error after Next.js and React.js version upgrade

[Manjush S]

Steps to reproduce

• Clone the project and install dependencies.
• run command yarn add next@latest react@latest react-dom@latest eslint-config-next@latest as mentioned in Next.js upgrade guide
• run yarn dev

What is expected?

Template dashboard without any error should be shown.

What is actually happening?

Facing error (Can access dashboard if we close error popup) : Error: Hydration failed because the initial UI does not match what was rendered on the server.
Reference: https://nextjs.org/docs/messages/react-hydration-error

Additional data

• NodeJS Version: v18
• Package manager(npm|yarn|pnpm): yarn
• Browser name & version: Google Chrome@latest
• System: Latest LTS Debian

[Julien]

Solved it by not using nextjs 13.

[Neel Brahmakshatriya]

Hi @manjushsh and @Julien-Sytadelle,

Thanks for reporting this. As @Julien-Sytadelle has pointed out, this is not updated to the latest version of Next.js 13. It is suggested to not update packages manually as it may break the template.

All the packages will be updated to the latest version in the next update along with Next.js 13 support. It will take some time and we appreciate your patience.

We have updated all the packages to their latest versions along with Next.js 13 support in the Materio Pro. If you want the latest Next.js 13 support, you may purchase our Materio Pro or wait till we release an update for the Materio Free.

[Manjush S]

Okay @neelbrahmakshatriya, Thank you

[jorcelinojunior]

@manjushsh Here is a version of the typescript-version folder updated for NextJs 13.
https://github.com/jorcelinojunior/materio-mui-react-nextjs-admin-template-free

I hope it's useful for you.

[Manjush S]

@jorcelinojunior Thank You! I will try it out.

[Pratik kumar]

hi i, am using js folder getting

Unhandled Runtime Error

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

Warning: Expected server HTML to contain a matching in .

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

how i can fix.

do i need to update all pulgin in package.json

FIX

comment

// const StyledLink = styled('a')({
// display: 'flex',
// alignItems: 'center',
// textDecoration: 'none'
// })
in file
src/@core/layouts/components/vertical/navigation/VerticalNavHeader.js

// ** Next Import
import Link from 'next/link'

// ** MUI Imports
import Box from '@mui/material/Box'
import { styled, useTheme } from '@mui/material/styles'
import Typography from '@mui/material/Typography'

// ** Configs
import themeConfig from 'src/configs/themeConfig'

// ** Styled Components
const MenuHeaderWrapper = styled(Box)(({ theme }) => ({
  display: 'flex',
  alignItems: 'center',
  justifyContent: 'space-between',
  paddingRight: theme.spacing(4.5),
  transition: 'padding .25s ease-in-out',
  minHeight: theme.mixins.toolbar.minHeight
}))

const HeaderTitle = styled(Typography)(({ theme }) => ({
  fontWeight: 600,
  lineHeight: 'normal',
  textTransform: 'uppercase',
  color: theme.palette.text.primary,
  transition: 'opacity .25s ease-in-out, margin .25s ease-in-out'
}))

// const StyledLink = styled('a')({
//   display: 'flex',
//   alignItems: 'center',
//   textDecoration: 'none'
// })

const VerticalNavHeader = props => {
  // ** Props
  const { verticalNavMenuBranding: userVerticalNavMenuBranding } = props

  // ** Hooks
  const theme = useTheme()

  return (
    <MenuHeaderWrapper className='nav-header' sx={{ pl: 6 }}>
      {userVerticalNavMenuBranding ? (
        userVerticalNavMenuBranding(props)
      ) : (

        <Link href='/' passHref>
          {/* <StyledLink> */}
          <img width={38} height={38} alt='Neev Hr' src='/images/logo.png' />

          <HeaderTitle variant='h6' sx={{ ml: 3 }}>
            {themeConfig.templateName}
          </HeaderTitle>
          {/* </StyledLink> */}
        </Link>
      )}
    </MenuHeaderWrapper>
  )
}

export default VerticalNavHeader

[SmartChain-AI]

Thankyou pratik007kumar for pointing me in the right direction, but a better way to solve the hydration error is to remove Link completely and put it's parameters inside of StyledLink, like so :

import Link from 'next/link'

// ** MUI Imports
import Box from '@mui/material/Box'
import { styled, useTheme } from '@mui/material/styles'
import Typography from '@mui/material/Typography'

// ** Configs
import themeConfig from 'src/configs/themeConfig'

// ** Styled Components
const MenuHeaderWrapper = styled(Box)(({ theme }) => ({
  display: 'flex',
  alignItems: 'center',
  justifyContent: 'space-between',
  paddingRight: theme.spacing(4.5),
  transition: 'padding .25s ease-in-out',
  minHeight: theme.mixins.toolbar.minHeight
}))

const HeaderTitle = styled(Typography)(({ theme }) => ({
  fontWeight: 600,
  lineHeight: 'normal',
  textTransform: 'uppercase',
  color: theme.palette.text.primary,
  transition: 'opacity .25s ease-in-out, margin .25s ease-in-out'
}))

 const StyledLink = styled('a')({
   display: 'flex',
   alignItems: 'center',
   textDecoration: 'none'
 })

const VerticalNavHeader = props => {
  // ** Props
  const { verticalNavMenuBranding: userVerticalNavMenuBranding } = props

  // ** Hooks
  const theme = useTheme()

  return (
    <MenuHeaderWrapper className='nav-header' sx={{ pl: 6 }}>
      {userVerticalNavMenuBranding ? (
        userVerticalNavMenuBranding(props)
      ) : (
          <StyledLink href='/' passHref>
             <img width={38} height={38} alt='Neev Hr' src='/images/logo.png' />
             <HeaderTitle variant='h6' sx={{ ml: 3 }}>
                  {themeConfig.templateName}
             </HeaderTitle>
          </StyledLink>
      )}
    </MenuHeaderWrapper>
  )
}

export default VerticalNavHeader

you can see that the problem was Link is actually an <a> tag, and so is StyledLink. So the error stems from having the following nesting ie. an <a> element inside of an <a> element

<a href="/">
   <a>
   ...more code here
   </a>
</a>

if you still get the hydration error after applying this fix, go to line 71 of /src/@core/layouts/components/vertical/navigation/verticalnavlink.js and change component={'a'} to component={'div'} to supress the error for the time being. I'm pretty sure the same thing is happening in that file but haven't checked it out properly yet.

[Neel Brahmakshatriya]

Hello everyone,

Great news! We've rolled out a new version that includes the Next.js v14 App Router.

Please go ahead and give it a try. We're confident that the issue you've been experiencing should now be resolved in this latest update.

I'm going to close this thread since the issue is fixed in the new version, but don't hesitate to open a new issue if you encounter any problems. Your feedback is always welcome!