Next.jsにChakraを一から導入する手順を記載します。
Chakraをインストール
下記のコマンドでインストールします。
npm i @chakra-ui/react @emotion/react
スニペットを追加
下記のコメンドでスニペットを追加します。
npx @chakra-ui/cli snippet add
tsconfigを更新
tsconfigの「」の箇所を更新します。
tsconfig.json
{
"compilerOptions": {
"target": "ESNext",//👈修正
"lib": ["dom", "dom.iterable", "esnext"],
"allowJs": true,
"skipLibCheck": true,
"strict": true,
"noEmit": true,
"esModuleInterop": true,
"module": "ESNext",//👈修正
"moduleResolution": "bundler",
"resolveJsonModule": true,
"isolatedModules": true,
"jsx": "react-jsx",
"incremental": true,
"plugins": [
{
"name": "next"
}
],
"paths": {
"@/*": ["./src/*"]//👈修正
}
},
//(省略)
修正後のtsconfig.jsonの中身は下記のとおりです。
tsconfig.json
{
"compilerOptions": {
"target": "ESNext",//修正
"lib": ["dom", "dom.iterable", "esnext"],
"allowJs": true,
"skipLibCheck": true,
"strict": true,
"noEmit": true,
"esModuleInterop": true,
"module": "ESNext",//修正
"moduleResolution": "bundler",
"resolveJsonModule": true,
"isolatedModules": true,
"jsx": "react-jsx",
"incremental": true,
"plugins": [
{
"name": "next"
}
],
"paths": {
"@/*": ["./src/*"]//追加
}
},
"include": [
"next-env.d.ts",
"**/*.ts",
"**/*.tsx",
".next/types/**/*.ts",
".next/dev/types/**/*.ts",
"**/*.mts"
],
"exclude": ["node_modules"]
}
Providerの設定
app/layout.tsx
import { Provider } from "../components/ui/provider";//追加
export default function RootLayout(props: { children: React.ReactNode }){
const { children } = props
return (
<html suppressHydrationWarning>
<body>
<Provider>{children}</Provider>
</body>
</html>
)
}
バンドルの最適化
next.config.mjsをプロジェクトルート配下に作成します。
作成後下記のように追記します。
next.config.mjs
export default {
experimental: {
optimizePackageImports: ["@chakra-ui/react"],
},
}
Package.jsonの更新
Next.js 13 の --turbo フラグとChakra UI / Emotionの組み合わせで起きる既知のHydrationエラー に関する指示です。
つまりpackage.jsonのdevスクリプトから --turbo を削除すれば解決する という意味です。
package.json
"scripts": {
"dev": "next dev",//👈修正
"build": "next build",
"start": "next start"
}
サイト
Using Chakra UI in Next.js (App)
How to set up Jest with Next.js