NextUI を利用する : Haramizu.com

これまで動かしていたサンプルは、最低限のデザインも入っておらず、文字を表示する程度の動きでした。もう少し見た目をきれいにするべく、今回はプロジェクトで NextUI を利用できるようにしていきます。

NextUI とは？

Web で利用できるコンポーネントライブラリはいろいろと提供されています。スタイルシートとして、Next.js は Tailwind.css を簡単に利用できるようにプロジェクト作成時選択することができますが、Tailwind.css をベースとして作成された NextUI という UI ライブラリが提供されています。

NextUI

Next.js で利用するための手順は以下のページで公開されています。

Next.js（公式）
【Next.js】NextUI の導入方法（ブログ）

このページで適用済みのプロジェクト作成方法が紹介されていますが、今回は後付けで設定をする手順を実施していきます。

インストールする

まず最初に、以下のコマンドを実行して NextUI をインストールします。

npm i @nextui-org/react framer-motion

続いて tailwind.config.js が設定ファイルとなっているため、以下のように更新をしました。

// tailwind.config.js
import { nextui } from "@nextui-org/react";

/** @type {import('tailwindcss').Config} */

const config = {
  content: [
    "./components/**/*.{js,ts,jsx,tsx,mdx}",
    "./app/**/*.{js,ts,jsx,tsx,mdx}",
    "./node_modules/@nextui-org/theme/dist/**/*.{js,ts,jsx,tsx}",
  ],
  theme: {
    extend: {},
  },
  darkMode: "class",
  plugins: [nextui()],
};

export default config;

次に、app/providers.tsx のファイルを作成します。コードはサイトのままで以下の通りです。

// app/providers.tsx
'use client'

import {NextUIProvider} from '@nextui-org/react'

export function Providers({children}: { children: React.ReactNode }) {
  return (
    <NextUIProvider>
      {children}
    </NextUIProvider>
  )
}

続いて app/layout.tsx ファイルで上記のファイルをインポートをしつつ、以下部分を追加、編集しました。

import { Providers } from "./providers";

    <html lang="ja" className="dark">
      <body>
        <Providers>{children}</Providers>
      </body>}
    </html>

これで設定は完了です。UI のコンポーネントをページの中で利用してみます。今回は app/page.tsx の中に以下のコードを追加しました。

import {Button} from '@nextui-org/button';

    <div>
      <Button>Click me</Button>
    </div>

これでページにボタンが追加されました。

まとめ

NextUI を利用することで、サンプルを作る上での見た目を標準のできたデザインにすることができます。もちろん、この UI を利用してアプリを簡単に作ることが可能になります。