[NEXTJS] styled-components 적용

Javascript/Next

[NEXTJS] styled-components 적용

eulBlue 2024. 11. 8. 09:33

📱테스트 환경

"react": "19.0.0-rc-02c0e824-20241028",
"react-dom": "19.0.0-rc-02c0e824-20241028",
"next": "15.0.2"

[NextJS] Syled-components 사용하는 방법

📱테스트 환경 "react": "18.2.0" "react-dom": "18.2.0" "typescript": "^5.1.6" 😢 내가 겪은 문제 개발환경 ( http ) 에서는 문제가 없었는데 배포환경 ( https ) 에서는 한번씩 디자인이 깨졌다. 아니면 새로고침

8735.tistory.com

작년에 작성한적이있는데 새롭게 적용하려고

문서를 좀 찾아보다보니 적용하는 방법이 변경됐었다.

버전이 업데이트되면서 사용방식도 변경된것같은데 이에맞춰서

최신버전에 맞게 다시 작성하려고 한다.

const nextConfig = {
  ...
  compiler: {
  	...
    styledComponents: true,
  }
};

next.config.ts(js) 에 추가해주고

// GlobalStyles.tsx
"use client";

import { createGlobalStyle } from "styled-components";

export const GlobalStyles = createGlobalStyle`
    * {
        margin: 0;
        padding: 0;
    }
`;

// StyledComponentsRegistry.tsx
"use client";

import React, { useState } from "react";
import { useServerInsertedHTML } from "next/navigation";
import { ServerStyleSheet, StyleSheetManager } from "styled-components";

type StyledComponentsRegistryProps = {
    children: React.ReactNode;
};

export const StyledComponentsRegistry = ({ children }: StyledComponentsRegistryProps) => {
    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}>{children}</StyleSheetManager>
    );
};

lib 폴더를 만들고 그 안에 두개의 파일을 만들어서

넣어준다. 이게 SSR 에서 Styled-component 가 적용될때

스타일이 적용되지않은채 보이는 현상을 막아줄 것이다.

나는 pages 구조이기 때문에 _document.tsx 파일에 설정해준다.

import { Html, Head, Main, NextScript } from "next/document";
import {GlobalStyles} from "@/lib/GlobalStyles";
import {StyledComponentsRegistry} from "@/lib/StyledComponentsRegistry";

export default function Document() {
  return (
    <Html lang="en">
      <Head />
      <body className="antialiased">
        <GlobalStyles />
        <StyledComponentsRegistry>
            <Main />
            <NextScript />
        </StyledComponentsRegistry>
      </body>
    </Html>
  );
}

apps 구조인 경우는 공식문서를 따로 다시 찾아봐야한다 ㅎ

저작자표시