📍Styled-components는..
✅장점
- React 친화적 (React를 위해 만들어짐)
- style이 자동으로 주입된 컴포넌트를 만들 수 있음
- props를 통한 다이나믹 스타일링 가능
:disabled or :hover 상태에 따라 스타일링 변화
✅단점 (Next.js 측면에서)
- SSR 지원을 위한 추가 설정 필요
- 컴파일 이후 스타일에 랜덤한 클래스명이 생성되어 디버깅이 어려움
📍_document.tsx를 수정하여 SSR 지원
✅기본적으로 CSR 방식으로 동작하는 styled-components를 SSR 방식으로 동작하게 수정
import Document, { Head, Html, Main, NextScript } from 'next/document'
import { ServerStyleSheet } from 'styled-components'
export default class MyDocument extends Document {
render() {
return (
<Html lang="en">
<Head></Head>
<body>
<Main />
<NextScript />
</body>
</Html>
)
}
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()
}
}
}
📍next.config.js 에서 컴파일러 설정 추가
✅Nextjs 에서 컴파일러가 styled-components 문법을 인식
module.exports = {
compiler: {
styledComponents: true,
},
};
📍참고
https://blog.logrocket.com/best-styling-options-nextjs/
The best styling options for Next.js - LogRocket Blog
Choosing a styling option is dependent on many factors. Thankfully, Next.js offers built-in support for CSS in a variety of different ways.
blog.logrocket.com