Next.js로 프로젝트 구성중 styled-components가 새로고침시 적용이안되는 현상을 마주치게 됨
그 이유는 Next.js가 SSR로 작동하기 때문에 style이 적용되기 전에 렌더링이 되어서 그렇다.
아래의 방법을 통해 문제를 해결하였다.
1.babel-plugin 설치
npm i babel-plugin-styled-components -D2.루트 디렉토리에 .babelrc를 생성
{
"presets": ["next/babel"],
"plugins": [
[
"styled-components",
{
"ssr": true,
"displayName": true,
"preprocess": false
}
]
]
}3.pages폴더에 _documents.js를 생성
// _documents.js
import Document, {
Html, Head, Main, NextScript,
} from 'next/document';
import { ServerStyleSheet } from 'styled-components';
export default class MyDocument extends Document {
static async getInitialProps(ctx) {
const sheet = new ServerStyleSheet();
const originalRenderPage = ctx.renderPage;
try {
ctx.renderPage = () => originalRenderPage({
enhanceApp: (App) => (props) => sheet.collectStyles(<App {...props} />),
});
const initialProps = await Document.getInitialProps(ctx);
return {
...initialProps,
styles: (
<>
{initialProps.styles}
{sheet.getStyleElement()}
</>
),
};
} finally {
sheet.seal();
}
}
render() {
return (
<Html>
<Head>
<style />
</Head>
<body>
<Main />
<NextScript />
</body>
</Html>
);
}
}
기록하는 습관을 기르자