front-end/Nextjs

[NextJS] NextJS에서 Styled-components사용할 때 오류 해결

hojung 2022. 6. 30.

728x90

1. Styled-Components라이브러리

styled-components를 nextjs에 적용하던 중 문제가 발생했다. 화면이 정말 미친듯이 깜빡이기 시작한 것이다.

먼저 styled-components를 사용하던 분이 nextjs에서 styled-components가 문제가 발생할 수 있다고 귀띔해준 것이 기억나서 이것이 그 문제인가보다 하고 바로 구글링에 들어갔다.

2. 왜 화면이 깜빡거리는가?

NextJS는 서버에서 미리 Meta태그 등이 포함되어 있는 HTML을 먼저 만들어 놓은 후 보여주는 ServerSide Rendering 을 제공하기 때문에 HTML에는 손을 댈 수가 없다. 따라서 그 후에 JavaScript를 추가해주어야하는데 Styled-components라이브러리는 css-in-JS인 styled-components는 처음부터 HTML에 추가가 되어 있을 수가 없다. 따라서 HTML이 만들어진 후 추가가 되어야하는데 이 추가가 되는 과정에서 깜빡거리게 되는 것이다.

3. 해결 방법

NextJS에서는 Next앱의 기본 설정을 할 수 있는 파일이 두 가지가 존재한다. 바로 _document.tsx와 _app.tsx이다.

이 파일들을 수정함으로써 Styled-components를 사용할 수 있는데

코드는 다음과 같다.

1. _document.tsx

import Document, { Html, Head, Main, NextScript, DocumentContext } from "next/document";
import { ServerStyleSheet } from "styled-components";

class MyDocument extends Document {
	static async getInitialProps(ctx: DocumentContext) {
		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);
			const styleElement = [
				<>
					{initialProps.styles}
					{sheet.getStyleElement()}
				</>,
			];
			return {
				...initialProps,
				styles: styleElement,
			};
		} finally {
			sheet.seal();
		}
	}

	render() {
		return (
			<Html>
				<html lang="ko" />
				<Head></Head>
				<body>
					<Main />
					<NextScript />
				</body>
			</Html>
		);
	}
}

export default MyDocument;

코드를 살펴보면

이 부분이 styled-components를 담당하는 부분이다.

하지만 _document.tsx는 serverside Rendering만 가능하여 React의 기능들은 사용할 수 없다.

이를 해결하기 위해선 바벨의 플러그인을 추가해주어야한다.

yarn add -D babel-plugin-styled-components

그 후 바벨 설정을 해주는 파일 .babelrc파일을 root경로에 만든 후 다음과 같이 적어준다.

{
	"presets": ["next/babel"],
	"plugins": [
		[
			"babel-plugin-styled-components",
			{
				"ssr": true,
				"displayName": false
			}
		]
	]
}

위를 적용하면 styled-components를 Next.js에서 사용할 때 화면이 깜빡거리던 문제를 해결할 수 있다.