title: Getting error, `Prop `className` did not match` when deploying to Heroku, but works locally
body: <p>I'm getting the following error:</p>
  <blockquote>
  <p>Prop <code>className</code> did not match. Server: &quot;jss1 jss5&quot; Client: &quot;makeStyles-root-1 makeStyles-root-5&quot;</p>
  </blockquote>
  <p>When deploying to <em>Heroku</em>. Everything works fine normally locally, but not when deployed. I pretty much have the same setup as <a href="https://medium.com/javascript-in-plain-english/ssr-with-next-js-styled-components-and-material-ui-b1e88ac11dfa" rel="nofollow noreferrer">here</a>.</p>
  <p>I've found a similar <a href="https://github.com/mui-org/material-ui/issues/18018" rel="nofollow noreferrer">Github issue</a>, but none of the suggestions there helped me.</p>
  <p>Locally, these classes similar to <code>makeStyles-${key}-${id}</code> are injected when I'm developing, but it's not working on Heroku. What could be going wrong?</p>
  <h1>Edit</h1>
  <hr />
  <p>After more investigation, it seems that setting NODE_ENV to production is why it's breaking. Here are my scripts in <code>package.json</code>:</p>
  <pre class="lang-json prettyprint-override"><code>    &quot;scripts&quot;: {
          &quot;dev&quot;: &quot;nodemon server.ts&quot;,
          &quot;build&quot;: &quot;next build &amp;&amp; tsc --project tsconfig.server.json&quot;,
          &quot;start&quot;: &quot;NODE_ENV=production node .next/production-server/server.js&quot;
      }
  </code></pre>
  <p>If I change it to:</p>
  <pre class="lang-json prettyprint-override"><code>    ...
          &quot;start&quot;: &quot;NODE_ENV=development node .next/production-server/server.js&quot;
                             ^^^^^^^^^^^
      ...
  </code></pre>
  <p>Then it works the same way as it would work if I were to run <code>npm run dev</code>.</p>
  <p>I've noticed that when <code>NODE_ENV=production</code>, all my Material UI components that use <code>makeStyles</code> have classNames of <code>jss-'some-number'</code>. Some are <code>jss1</code>, <code>jss5</code>, etc. When <code>NODE_ENV=development</code>, these get replaces with <code>makeStyles-root-1</code>, <code>makeStyles-footer-1</code>, etc.</p>
  <p>My <code>tsconfig.server.json</code>:</p>
  <pre class="lang-json prettyprint-override"><code>{
      &quot;extends&quot;: &quot;./tsconfig.json&quot;,
      &quot;compilerOptions&quot;: {
          &quot;noEmit&quot;: false,
          &quot;module&quot;: &quot;commonjs&quot;,
          &quot;outDir&quot;: &quot;.next/production-server/&quot;
      },
      &quot;include&quot;: [&quot;**/*.ts&quot;]
  }
  </code></pre>
  <p>It seems that this isn't related to Heroku at all, and there's something wrong with my configuration. Any help would be much appreciated.</p>
  <hr />
  <p><a href="https://github.com/mkhoussid/nextjs-mui" rel="nofollow noreferrer">Re-production issue</a></p>
  <p><a href="https://github.com/vercel/next.js/issues/16748" rel="nofollow noreferrer">Github</a> issue with a reproducible repo.</p>