Breaking News: Grepper is joining You.com. Read the official announcement!

NextJs + Material UI, manually refreshing causes

Meguenni Walid answered on June 24, 2022 Popularity 4/10 Helpfulness 1/10

answer NextJs + Material UI, manually refreshing causes

NextJs + Material UI, manually refreshing causes

Comment

//It's a problem with Next.js and @material-ui. The problem has something to do with SSR (Server Side Rendering) so you have to cancel it and remove the server side files.

//step 1: create _document.js under pages folder

//step 2: add this to the documents file

import { ServerStyleSheets } from '@mui/styles';
import Document, { Head, Html, NextScript, Main } from 'next/document';
import React from 'react';

export default class MyDocument extends Document {
  render() {
    return (
      <Html lang="en">
        <Head></Head>
        <body>
          <Main></Main>
          <NextScript></NextScript>
        </body>
      </Html>
    );
  }
}

MyDocument.getInitialProps = async (ctx) => {
  const sheets = new ServerStyleSheets();
  const originalRenderPage = ctx.renderPage;
  ctx.renderPage = () => {
    return originalRenderPage({
      enchanceApp: (App) => (props) => sheets.collect(<App {...props} />),
    });
  };
  const initialProps = await Document.getInitialProps(ctx);
  return {
    ...initialProps,
    styles: [
      ...React.Children.toArray(initialProps.styles),
      sheets.getStyleElement(),
    ],
  };
};

//step 3: inside the _app.js add this inside the main function component

  useEffect(() => {
    const jssStyles = document.querySelector('#jss-server-side');
    if (jssStyles) jssStyles.parentElement.removeChild(jssStyles);
  }, []);

//restart the Next.js app and you're done

Popularity 4/10 Helpfulness 1/10 Language javascript

Source: stackoverflow.com

Tags: javascript material-ui next.js

Link to this answer
Share Copy Link

Contributed on Jun 24 2022

Meguenni Walid

0 Answers Avg Quality 2/10

NextJs + Material UI, manually refreshing causes

Contents

More Related Answers

NextJs + Material UI, manually refreshing causes

Grepper

Documentation

Social

Legal

Contact

Oops, You will need to install Grepper and log-in to perform this action.