Next 13이상 버전에서 차크라 ui 쓰는 법 정리
npm i @chakra-ui/react @chakra-ui/next-js @emotion/react @emotion/styled framer-motion
app/providers.tsx
'use client'
import { ChakraProvider } from '@chakra-ui/react'
export function Providers({ children }: { children: React.ReactNode }) {
return <ChakraProvider>{children}</ChakraProvider>
}
client에서 provider를 생성해준다.
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>
)
}
방금 만든 Providers를 불러와 body안에 감싸준다.
layout.tsx에서 함!
만약에 theme.ts를 따로 만들었다면,
theme={theme}
만든 theme를 불러와 ChakraProviders에 넣어주면 된당
'TIL > Next.js' 카테고리의 다른 글
| Next.js | 네이버 로그인 구현하기 (네아로~) (0) | 2024.03.06 |
|---|---|
| Next.js | 구글 로그인 구현하기 (0) | 2024.03.05 |
| Next.js | 카카오 로그인 구현하기 (1) | 2024.02.27 |
| [TIL] Next.js 13 라우팅 (4) | 2023.05.27 |
| Next.js 기초 2 - component, props, state (0) | 2023.05.20 |
