Next.js 13 に NextUI を導入する
2022/11/21
Next.js 13 の app ディレクトリモード？に NextUI を導入した時のメモ
NextUI はまだ Next.js 13 に完全対応はしておらず、とりあえず動くところまで持っていけただけなので参考程度に
前提条件
以下コマンドで Next.js のアプリを作成したばかりところに導入する
$ yarn create next-app app_name --typescript --experimental-app手順
インストール
$ yarn add @nextui-org/reactセットアップ
app/providers.tsx を作成
app/providers.tsx
"use client"
import { useServerInsertedHTML } from "next/navigation"
import { NextUIProvider, CssBaseline } from "@nextui-org/react"
export function Providers({ children }: { children: React.ReactNode }) {
useServerInsertedHTML(() => {
return <>{CssBaseline.flush()}</>
})
return <NextUIProvider>{children}</NextUIProvider>
}app/layout.tsx を以下のように修正
app/layout.tsx
import "./globals.css"
+import { Providers } from "./providers"
export default function RootLayout({
children,
}: {
children: React.ReactNode
}) {
return (
<html lang="en">
<head>
<title>Create Next App</title>
<meta name="description" content="Generated by create next app" />
<link rel="icon" href="/favicon.ico" />
</head>
- <body>{children}</body>
+ <body>
+ <Providers>{children}</Providers>
+ </body>
</html>
)
}動作確認
ボタンを仮設置して、NextUI が有効になっているかを確認する
app/page.tsx
+"use client"
+
import Image from "next/image"
import styles from "./page.module.css"
+import { Button } from "@nextui-org/react"
export default function Home() {
return (
<div className={styles.container}>
<main className={styles.main}>
<h1 className={styles.title}>
Welcome to <a href="https://nextjs.org">Next.js 13!</a>
</h1>
<p className={styles.description}>
Get started by editing{" "}
<code className={styles.code}>app/page.tsx</code>
+ <Button>Click me</Button>
</p>
...
スタイルが当たっているボタンが表示されていたらOK
