Next.js + styled-components
- 평소에 emotion을 즐겨 사용하지만 Next.js ver14는 아직 서버컴포넌트에서의 emotion이 제대로 동작하지 않는다는 이슈가 있어 styled-components를 사용하였다.
- yarn add styled-components
styled-components 설정
- styleRegistry.tsx 파일을 생성한다. useServerInsertedHTML로 웹 구조를 읽어들일 때 head 태그에 style을 넣어주는 작업을 진행한다.
// 경로: /public/styles/styleRegistry.tsx_
'use client';
import React, { useState } from 'react';
import { useServerInsertedHTML } from 'next/navigation';
import { ServerStyleSheet, StyleSheetManager } from 'styled-components';
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}>{children}</StyleSheetManager>;
}- 전역스타일 설정을 위해 GlobalStyle.tsx 파일을 생성해주고 'use client'를 꼭 명시해준다. reset 설정은 커스텀해서 작성해도 되지만 귀찮다면 styled-components에서 제공해주는 reset 모듈을 사용하여도 괜찮다.
- yarn add styled-reset
// 경로: /public/styles/GlobalStyle.tsx_
'use client';
import { createGlobalStyle } from 'styled-components';
import reset from 'styled-reset'; // reset 사용시
const GlobalStyles = createGlobalStyle`
${reset} // reset 사용시
`;
export default GlobalStyles;- 마지막으로, layout.tsx에 두 파일을 import하여 선언해주면 설정 완료!!
import StyledComponentsRegistry from './page';
import GlobalStyles from '../../public/styles/GlobalStyle';
export default function RootLayout({ children }: { children: React.ReactNode }) {
return (
<html lang="ko">
<body>
<GlobalStyles />
<StyledComponentsRegistry>{children}</StyledComponentsRegistry>
</body>
</html>
);
}개선할점
- 아직 새로고침을 하거나 새로 렌더링 될 때 스타일이 적용이 안되어있는 상태로 나타나는데 SSR 렌더링에 대해 더 알아볼 필요가 있다. 작업을 진행해보고 이후 글을 수정 할 예정이다.
세상에 이로운 영향력을 퍼뜨리고 싶은 프론트엔드 개발자 입니다.