목차
Next.js에 styled-components를 적용해보자
https://nextjs.org/docs/app/building-your-application/styling/css-in-js#styled-components
Styling: CSS-in-JS | Next.js
Use CSS-in-JS libraries with Next.js
nextjs.org
Next.js 공식문서에 Styled Components를 적용하는 방법이 다루어져있다
세팅방법
next.config.js 변경
module.exports = {
compiler: {
styledComponents: true,
},
}next.config.js를 위처럼 compiler의 styledcomponents를 추가해준다.
registry.tsx 파일 추가
styled-components와 Next.js를 함께 사용할 때, 서버사이드렌더링과 클라이언트 사이드 렌더링간의 불일치를 해결해줘야한다. 해당 파일은 그 불일치를 해결해준다.
공식문서에서는 /src/lib/registry.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
}) {
// Only create stylesheet once with lazy initial state
// x-ref: https://reactjs.org/docs/hooks-reference.html#lazy-initial-state
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>
)
}
layout.tsx에 registry 주입
루트 레이아웃에 <body>안에 감싸주면된다. 그럼 이제 styled-component를 사용할 수 있다.
import StyledComponentsRegistry from './lib/registry'
export default function RootLayout({
children,
}: {
children: React.ReactNode
}) {
return (
<html>
<body>
<StyledComponentsRegistry>{children}</StyledComponentsRegistry>
</body>
</html>
)
}
마치며
원래 위 과정을 거치지 않고 클라이언트 컴포넌트를 만들어서 styled-components를 사용하고있었는데 prop mismatch가 일어나서 알아보게되었다. 그 에러는 클라이언트사이드렌더링과 서버사이드렌더링이 이루어지면서 불일치가 일어나는 현상이라고 한다.
위 과정을하면은 그 에러가 수정되고 잘 나오는 것을 볼 수 있다.
'Next.js' 카테고리의 다른 글
| [Next, vitest] Next.js에 vitest 적용해보기(기록용) (0) | 2024.12.04 |
|---|---|
| [Next.js, socket.io] Next.js에서 socket.io 공식 사용하기 (0) | 2024.06.07 |
| [Next.js, TS,Zustand] 페이지 이동전 로딩효과 추가하기 (0) | 2024.05.30 |
| [Next.js,TS] 특정폴더에만 Eslint 적용하기 (0) | 2024.05.30 |
| [Next.js, TypeScript] airbnb 및 커스텀 TS 세팅 (1) | 2024.05.29 |
