NextJS + Material-UI - Warning: Prop className did not match

Steps to Resolve "Prop className did not match" Warning in Next.js + Material-UI:

  1. Understanding the Warning: The warning "Prop className did not match" in Next.js + Material-UI typically occurs when the server-rendered HTML does not match the client-rendered HTML due to differences in the class names.

  2. Check for Server-Side Rendering: Ensure that your Next.js application is using server-side rendering (SSR) and that the pages are being pre-rendered on the server.

  3. Use of Material-UI Styles: If you are using Material-UI styles, make sure that they are being properly handled during server-side rendering to avoid discrepancies between the server-rendered and client-rendered content.

  4. Hydrate Material-UI Styles: Utilize the StylesProvider component from Material-UI to hydrate the server-rendered styles on the client side, ensuring that the class names match between the server and the client.

  5. Wrap the App Component: Wrap your Next.js App component with the StylesProvider and provide a generateClassName function to ensure consistent class names between server and client.

  6. Example Code:

import { StylesProvider } from '@material-ui/core/styles';

function generateClassName(rule, sheet) {
  return `${sheet.options.classNamePrefix}-${rule.key}`;
}

function MyApp({ Component, pageProps }) {
  return (
    <StylesProvider generateClassName={generateClassName}>
      <Component {...pageProps} />
    </StylesProvider>
  );
}

export default MyApp;

  1. Rebuild and Test: After making these adjustments, rebuild your Next.js application and test to ensure that the "Prop className did not match" warning no longer appears.

  2. Further Considerations: If the warning persists, review any customizations or overrides to Material-UI styles and ensure they are being handled consistently during server-side and client-side rendering.

Let me know if you need further assistance!