高木のブログ

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>
...

001.png

スタイルが当たっているボタンが表示されていたらOK

参考


ytkg

Written by ytkg, Twitter, GitHub