📱테스트 환경
"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 구조인 경우는 공식문서를 따로 다시 찾아봐야한다 ㅎ
'Javascript > Next' 카테고리의 다른 글
| [NEXTJS] ANTD SyntaxError: Unexpected token 'export' (0) | 2025.01.01 |
|---|---|
| [NEXTJS] Google Analytics 연결 (2) | 2024.11.09 |
| [NEXTJS] Sentry 연결 (2) | 2024.11.07 |
| [JavaScript] Canvas 글자에 그림자 효과 (2) | 2023.10.26 |
| [NextJS] base64 Image ReSize (0) | 2023.09.01 |