はじめに
現在フリーランスでコーダーとして活動している@6zin6です。
今回はNext.js14でChakra UIの導入方法を自分のメモとして残しておこうと思います。
環境
- Next.js - 14.2.5
- React - 18
導入方法
1. Chakra UIのインストール
Chakra UIの公式ドキュメントに沿って、Next.jsにインストールします。
プロジェクトにルートディレクトリに移動し、ターミナルに下記コマンドを入力します。
npm i @chakra-ui/react @chakra-ui/next-js @emotion/react @emotion/styled framer-motion
2. Providerを設定する
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>
)
}
3. layout.tsxを編集する
appディレクトリ直下にある「layout.tsx」の内容を以下のように書き換える。
import { Providers } from './providers'
export default function RootLayout({
children,
}: {
children: React.ReactNode,
}) {
return (
<html lang='ja'>
<body>
<Providers>{children}</Providers>
</body>
</html>
)
}
以上。
Chakra UIのコンポーネントやスタイルを適用する際は適用するファイルの先頭に'use client'と記述しなければならない。（クライアントサイドコンポーネントに変換する必要があるため）