Chakra UI 써보기 with Next.js 13
0
링크
환경 & 사용 라이브러리 & 프레임워크
- Next.js 13
- Typescript
- React.js
패키지 설치
npm i @chakra-ui/react @chakra-ui/next-js @emotion/react @emotion/styled framer-motion
Providers 컴포넌트 생성
Chakra UI는 Client Component 에서만 동작하므로 Providers 생성 시 "use client" 를 붙여 생성해준다.
// app/providers.tsx
'use client'
import { CacheProvider } from '@chakra-ui/next-js'
import { ChakraProvider } from '@chakra-ui/react'
export function Providers({
children
}: {
children: React.ReactNode
}) {
return (
<CacheProvider>
<ChakraProvider>
{children}
</ChakraProvider>
</CacheProvider>
)
}layout 에서 Provider로 감싸주기
Client Component로 만든 Provider로 감싸주기 때문에 Client Component에서만 동작하는 Chakra UI의 구성요소와 hook 을 사용할 수 있게 된다.
Provider의 props인 theme에 옵션값을 넣어 테마 스타일을 변경할 수도 있다.
// app/layout.tsx
import { Providers } from "./providers";
export default function RootLayout({
children,
}: {
children: React.ReactNode;
}) {
return (
<html lang="en">
<body>
<Providers>
{children}
</Providers>
</body>
</html>
);
}
어제보다 오늘 더 발전하기
0개의 댓글
