728x90
반응형
제가 하고 있는 프로젝트를 기록합니다..
폴더 구조는 먼저 components, pages, public, styles, utils를 사용하였습니다. (추후에 더 추가할 예정입니다)
사용한 툴 : Material UI , next.js , styled-components
src
- components
- Layout.js (전체적인 레이아웃)
- pages
- _app.js
- _document.js
- index.js : 메인화면
- utils
- data.js : 전체적인 data (백엔드와 연동할 때 여기로 데이터 받아오기)
- DarkModeProvider.js : 다크모드 설정
- styles.js : 여기서 스타일링 함
- styles
_app.js에서는 refresh하면 스타일이 아예 적용안되는 문제(서버 사이드 렌더링에서의 문제)를 해결하였습니다. (이 내용은 따로 포스팅 하였습니다) 그리고 다크 모드를 적용하고 싶어서 utils 폴더에 DarkModeProvider를 만들어주었습니다.
DarkModeProvider로 전체를 감싸주었습니다.
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에서는 link로 글꼴을 받아왔고 여기서도 물론 새로고침하면 스타일이 자꾸 돌아가는 문제를 해결하였습니다.
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 |