[next JS] 7버전 styled-components 적용
next 업그레이드를 위해 페이지 작업도중 생긴 문제
csr과같이 css가 적용되지 않은 상태로 렌더링 된 후에 css가 적용되어 문제 발생
import Document, { Html, Head, Main, NextScript } from 'next/document'
import React from 'react'
import { ServerStyleSheet } from 'styled-components'
import Header from './Header'
export default class 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>
<Header />
</Head>
<body>
<Main />
<NextScript />
</body>
</html>
)
}
}ssr을 위해서 2가지 라이브러리를 설치해줍니다.
yarn add styled-components babel-plugin-styled-components
이후 아래 구조를 확인하고 .babelrc를 생성해줍니다.
- src
- package.json
+ .babelrc이후 아래 코드를 붙여줍니다.
.babelrc
{
"presets": ["next/babel"],
"plugins": [
[
"styled-components",
{
"ssr": true,
"displayName": true,
"preprocess": false
}
]
]
}
frontEnd Developer