Intro
Next.js에서 styled-components를 사용할 때 SSR을 지원하기 위해 따로 설정이 필요하다. 이건 Next.js에서 예시를 제공하기 때문에 그냥 붙여넣어 쓰면 된다.
Required
- babel-plugin-styled-components
- babel-plugin-inline-react-svg (svg 사용 시)
Full Code
_document.tsx와.babelrc파일에 아래 코드를 붙여 넣는다.
pages/\_document.tsx
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
import Document, { DocumentContext } from "next/document";
import { ServerStyleSheet } from "styled-components";
export default class MyDocument extends Document {
static async getInitialProps(ctx: DocumentContext) {
const sheet = new ServerStyleSheet();
const originalRenderPage = ctx.renderPage;
try {
ctx.renderPage = () =>
originalRenderPage({
enhanceApp: (App: any) => (props: any) =>
sheet.collectStyles(<App {...props} />),
});
const initialProps = await Document.getInitialProps(ctx);
return {
...initialProps,
styles: (
<>
{initialProps.styles}
{sheet.getStyleElement()}
</>
),
};
} finally {
sheet.seal();
}
}
render() {
return (
<Html>
<Head>/* meta, font등 설정 */</Head>
<body>
<Main />
<NextScript />
</body>
</Html>
);
}
}
.babelrc을 루트에 생성한 후 아래 코드를 붙여넣기
1
2
3
4
5
6
7
8
9
10
{
"presets": ["next/babel"],
"plugins": [
[
"babel-plugin-styled-components",
{ "ssr": true, "fileName": true, "displayName": true }
],
"inline-react-svg" // svg 사용 시
]
}