Next.js 14버전을 사용해보면서 개인 프로젝트를 진행하고 있다.
평상시와 다름없이 styled-components를 사용하려고 하는데 글로벌 스타일을 적용하는 데에 있어서 오류가 발생해서 이에 대해 포스팅 해보려고 한다!
💡 에러 발생 이유
이러한 에러가 발생한 이유에 대해서 간단하게 설명해 보자면, Next.js 13, 14 버전부터는 use client, use server를 통해서 서버 컴포넌트와 클라이언트 컴포넌트를 명확히 구분하게 된다.
📌 클라이언트 컴포넌트 / 서버 컴포넌트
- 클라이언트 컴포넌트: 말 그대로 클라이언트가 사용하는 컴포넌트이다. 버튼 또는 검색창과 같이 사용자와 상호작용하는 UI들. 즉 클라이언트에게 렌더링되는 컴포넌트를 생각하면 된다.
- 서버 컴포넌트: 서버 부분에서 렌더링되는 컴포넌트이다. 사용자와 상호작용하는 UI 등을 제외한 나머지가 서버에서 렌더링 되는 방식이다.
여기서 주의할 점은 Next.js는 SSR(Server Side Rendering)방식인 만큼 모든 컴포넌트는 서버 컴포넌트가 기본이다.
클라이언트 컴포넌트로 사용하고 싶다면 use client를 코드 최상단에 선언해주면 되는 것이다.
styled-components는 사용자 UI를 스타일링하기 위해 사용하는 것으로 클라이언트 컴포넌트를 구성하기 위해 필요하다.
이러한 이유로 use client를 사용하지 않았을 경우 에러가 발생했던 것이다.
💡 해결 방법
해결 방법은 공식 문서를 참고해서 따라하면 매우 간단하다.
/src/app폴더 아래에/lib폴더를 생성해주고registry.tsx파일을 생성해준다.
"use client";
import React, { useState } from "react";
import { useServerInsertedHTML } from "next/navigation";
import { ServerStyleSheet, StyleSheetManager } from "styled-components";
import GlobalStyles from "../style/GlobalStyles";
export default function StyledComponentsRegistry({
children,
}: {
children: React.ReactNode;
}) {
const [styledComponentsStyleSheet] = useState(() => new ServerStyleSheet());
useServerInsertedHTML(() => {
const styles = styledComponentsStyleSheet.getStyleElement();
styledComponentsStyleSheet.instance.clearTag();
return <>{styles}</>;
});
if (typeof window !== "undefined") return <>{children}</>;
return (
<StyleSheetManager sheet={styledComponentsStyleSheet.instance}>
<GlobalStyles /> // 글로벌 스타일 적용
{children}
</StyleSheetManager>
);
}
- app/layout.tsx 수정
import StyledComponentsRegistry from "./lib/registry";
export const metadata = {
title: "title",
description: "Generated by Soyeon!",
};
export default function RootLayout({
children,
}: {
children: React.ReactNode;
}) {
return (
<html lang="ko">
<body>
<StyledComponentsRegistry>{children}</StyledComponentsRegistry>
</body>
</html>
);
}use client를 사용한 registry.tsx컴포넌트로layout.tsx에서 children을 감싸주면서 styled-components를 사용하며 글로벌 스타일이 정상적으로 적용되는 것을 확인할 수 있다.
그럼 오늘의 포스팅 끝!
👩🏻💻👊🏻⭐️