Tailwind Logo

NextUI を利用する

Next.js

公開日: 2023-10-02

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

NextUI とは？

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

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

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

インストールする

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

PowerShell 
npm i @nextui-org/react framer-motion

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

TypeScript 
// 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 のファイルを作成します。コードはサイトのままで以下の通りです。

TypeScript 
// 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 ファイルで上記のファイルをインポートをしつつ、以下部分を追加、編集しました。

TypeScript 
import { Providers } from "./providers";

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

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

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

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

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

nextui.png

まとめ

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

関連タグ