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.

[lblblong]

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.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.尝试将data-toolpad-color-scheme="light"添加到layout.tsx文件根目录下的html标记以防止这种情况发生。在复制存储库中的layout.tsx文件中执行此操作时，错误对我来说消失了。

I tried, but the console still reports the same error message.
https://codesandbox.io/p/github/lblblong/nextjs-toolpad-demo/main?import=true

[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.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.尝试将data-toolpad-color-scheme="light"添加到layout.tsx文件根目录下的html标记以防止这种情况发生。在复制存储库中的layout.tsx文件中执行此操作时，错误对我来说消失了。

I tried, but the console still reports the same error message. https://codesandbox.io/p/github/lblblong/nextjs-toolpad-demo/main?import=true

For reference:

hydration.mov

[lblblong]

https://codesandbox.io/p/github/lblblong/nextjs-toolpad-demo/main?import=true

It still doesn't work on my side.

20241225_182010.mp4

[bharatkashyap]

https://codesandbox.io/p/github/lblblong/nextjs-toolpad-demo/main?import=true

It still doesn't work on my side.

20241225_182010.mp4

Got it, you need to set the value of data-toolpad-color-scheme to the theme that loads by default (during hydration), so add data-toolpad-color-scheme="dark" to the html tag instead of data-toolpad-color-scheme="light"

[lblblong]

https://codesandbox.io/p/github/lblblong/nextjs-toolpad-demo/main?import=true

It still doesn't work on my side.
20241225_182010.mp4

Got it, you need to set the value of data-toolpad-color-scheme to the theme that loads by default (during hydration), so add data-toolpad-color-scheme="dark" to the html tag instead of data-toolpad-color-scheme="light"

Thank you for the suggestion, it is indeed effective. However, when this code runs on the server side, how can I determine whether the client's theme is light or dark?

[bharatkashyap]

https://codesandbox.io/p/github/lblblong/nextjs-toolpad-demo/main?import=true

It still doesn't work on my side.
20241225_182010.mp4

Got it, you need to set the value of data-toolpad-color-scheme to the theme that loads by default (during hydration), so add data-toolpad-color-scheme="dark" to the html tag instead of data-toolpad-color-scheme="light"

Thank you for the suggestion, it is indeed effective. However, when this code runs on the server side, how can I determine whether the client's theme is light or dark?

It's impossible to detect on the server whether the client's theme is light or dark :) Here's more information on this: https://mui.com/material-ui/customization/css-theme-variables/configuration/#preventing-ssr-flickering