프론트엔드/Next.js

Next.js에서 새로고침하면 스타일이 적용안되는 문제

tt_honey 2022. 8. 4. 18:20
728x90
반응형

제목 그대로 새로고침하면 스타일이 적용안되는 문제가 생겼다.

Next.js가 서버 사이드 렌더링이라 나는 material ui를 사용하고 있었는데 스타일이 정상적으로 먹히지 않았다.

그렇기 때문에 몇가지 작업을 해줘야 하는데 일반적인 Server Rendering인 경우에는 Material Server Rendering을 참고하면 되고, Next.js를 사용하면 Material with Next.js를 참고하면 된다.
(https://github.com/mui/material-ui/tree/master/examples/nextjs)

 

내가 해결한 해결방법 코드

_app.js

import { useEffect } from "react";
import "../styles/globals.css";
import { DarkModeProvider } from "../utils/DarkModeProvider";

function MyApp({ Component, pageProps }) {
  useEffect(() => {
    const jssStyles = document.querySelector("#jss-server-side");
    if (jssStyles) {
      jssStyles.parentElement.removeChild(jssStyles);
    }
  }, []);
  return (
    <DarkModeProvider>
      <Component {...pageProps} />
    </DarkModeProvider>
  );
}

export default MyApp;

_document.js

import { ServerStyleSheets } from "@material-ui/core/styles";
import Document, { Head, Html, Main, NextScript } from "next/document";
import React from "react";

export default class MyDocument extends Document {
  render() {
    return (
      <Html lang="en">
        <Head>
          <link
            rel="stylesheet"
            href="https://fonts.googleapis.com/css?family=Roboto:300,400,500,700&display=swap"
          />
        </Head>
        <body>
          <Main />
          <NextScript />
        </body>
      </Html>
    );
  }
}

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