Hydration Mismatch in Next.js

[lblblong]

Steps to reproduce

https://github.com/lblblong/nextjs-toolpad-demo

Current behavior

I am currently using the Toolpad library in a Next.js project (reproduction repository: nextjs-toolpad-demo). However, I am encountering a hydration mismatch error in the browser console. The error message is as follows:

Expected behavior

No response

Context

No response

Your environment

npx @mui/envinfo

    System:
    OS: Linux 5.15 Ubuntu 22.04.3 LTS 22.04.3 LTS (Jammy Jellyfish)
  Binaries:
    Node: 18.19.1 - /run/user/1000/fnm_multishells/60963_1735054989551/bin/node
    npm: 10.2.4 - /run/user/1000/fnm_multishells/60963_1735054989551/bin/npm
    pnpm: 9.4.0 - /run/user/1000/fnm_multishells/60963_1735054989551/bin/pnpm
  Browsers:
    Chrome: Not Found
  npmPackages:
    @emotion/react: ^11.14.0 => 11.14.0 
    @emotion/styled: ^11.14.0 => 11.14.0 
    @mui/icons-material: ^6.3.0 => 6.3.0 
    @mui/material: ^6.3.0 => 6.3.0 
    @mui/material-nextjs: ^6.3.0 => 6.3.0 
    @toolpad/core: ^0.11.0 => 0.11.0 
    @types/react: ^19 => 19.0.2 
    react: ^19.0.0 => 19.0.0 
    react-dom: ^19.0.0 => 19.0.0 
    typescript: ^5 => 5.7.2 

Search keywords: Hydration mismatch next.js

[Dave4272-Office]

I also faced the same issue

for now the following solution helped me

<AppRouterCacheProvider
            options={{ enableCssLayer: true, key: "css", prepend: true }}
          >
    // Your Content Here
</AppRouterCacheProvider>

[lblblong]

I also faced the same issue

for now the following solution helped me

<AppRouterCacheProvider
            options={{ enableCssLayer: true, key: "css", prepend: true }}
          >
    // Your Content Here
</AppRouterCacheProvider>

Thanks for sharing your solution. Unfortunately, it didn't work for me. I tried implementing the with the same options you mentioned, but it still didn't resolve the issue. If you have any other suggestions, please let me know. thx.

[bharatkashyap]

Try adding data-toolpad-color-scheme="light" to the html tag at the root of the layout.tsx file to prevent this from happening. The error went away for me when doing it in the layout.tsx file in your reproduction repo.