Next.js, typescript, chakra-ui のプロジェクトの作成の仕方

まずはnextjs+typescriptのプロジェクトを作成

npx create-next-app@latest --ts

アプリ名を何にするか聞かれるので任意の名前を入力

chakra-uiのインストール

npm i @chakra-ui/react @emotion/react@^11 @emotion/styled@^11 framer-motion@^6

pages/_app.tsx を編集

import '../styles/globals.css'
import type { AppProps } from 'next/app'
import { ChakraProvider } from '@chakra-ui/react'    // 追加

function MyApp({ Component, pageProps }: AppProps) {
    return (
        <ChakraProvider>  // 追加
            <Component {...pageProps} />
        </ChakraProvider>  // 追加
    )
}

export default MyApp

ChakraProviderをimportして、 <Component {...pageProps} /> を囲う。

一応これでNext.js+typescriptで、chakra-uiが適用されているはず。