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
반응형
'프론트엔드 > Next.js' 카테고리의 다른 글
| Hydration Error (0) | 2022.08.24 |
|---|---|
| Next.js로 프로젝트 시작 (0) | 2022.08.04 |
| Next.js 설치와 폴더 구조 (0) | 2022.08.04 |
| Next.js 를 사용하는 이유 (0) | 2022.08.04 |