<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Contents</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
</head>
<body>

pnpm add @chakra-ui/react @chakra-ui/next-js @emotion/react @emotion/styled framer-motion
```js
// pages/_app.tsx
import type { AppProps } from 'next/app'
import { ChakraProvider } from '@chakra-ui/react'
export default function App({ Component, pageProps }: AppProps) {
return (
<div>
  <div></div>
</div>)
}
```
## Ref
- https://chakra-ui.com/getting-started/nextjs-guide
-

</body>
</html>


pnpm add @chakra-ui/react @chakra-ui/next-js @emotion/react @emotion/styled framer-motion
```js
// pages/_app.tsx
import type { AppProps } from 'next/app'
import { ChakraProvider } from '@chakra-ui/react'

export default function App({ Component, pageProps }: AppProps) {
return (
		<ChakraProvider>
			<Component {...pageProps} />
		</ChakraProvider>
	)
}
```


## Ref
- https://chakra-ui.com/getting-started/nextjs-guide
- 

20230829-chakra-ui

pnpm add @chakra-ui/react @chakra-ui/next-js @emotion/react @emotion/styled framer-motion

// pages/_app.tsx
import type { AppProps } from 'next/app'
import { ChakraProvider } from '@chakra-ui/react'

export default function App({ Component, pageProps }: AppProps) {
return (
        <ChakraProvider>
            <Component {...pageProps} />
        </ChakraProvider>
    )
}


https://chakra-ui.com/getting-started/nextjs-guide