はじめに

私は個人で開発する際に、私はフロントエンドをNext.jsを使うことが多いです。
その時に、UIライブラリとしてNextUIの導入をすることもありますので、今回はその備忘録として記事にまとめます。

実行環境

OS: windows 11 pro
Node.js: 21.6.1
npm: 10.2.4

Next.jsとは

幾度となく、紹介されている項目ですが、一応公式のWhat is Next.js?を載せておきます。

Next.jsは、フルスタックのWebアプリケーションを構築するためのReactフレームワークです。ユーザーインターフェイスの構築にはReact Componentsを使用し、追加機能や最適化にはNext.jsを使用します。Next.jsは、バンドルやコンパイルなど、Reactに必要なツールも抽象化して自動的に設定します。これにより、設定に時間を費やす代わりに、アプリケーションの構築に集中することができます。個人の開発者であれ、大規模なチームの一員であれ、Next.jsはインタラクティブでダイナミック、かつ高速なReactアプリケーションの構築を支援します。

NextUIとは

公式では以下のような説明がされております。

NextUIは、美しくアクセシブルなユーザーインターフェースの構築を支援するReact用のUIライブラリです。Tailwind CSSとReact Ariaの上に作成されています。NextUIの主な目標は、開発プロセスを合理化し、ユーザー体験を向上させるための美しく適応性のあるシステムデザインを提供することです。

手順

Next.jsのプロジェクト作成

# 任意のディレクトリを作成、移動
$ mkdir example_nextjs
$ cd example_nextjs

# Next.jsのプロジェクトを作成する
$ npx create-next-app@latest

# コマンド上で色々聞かれるので適当に選択と入力
# 以下は、実際に入力した例
What is your project named? example_nextjs
Would you like to use TypeScript? Yes
Would you like to use ESLint? Yes
Would you like to use Tailwind CSS? Yes
Would you like to use `src/` directory? Yes
Would you like to use App Router? (recommended) Yes
Would you like to customize the default import alias (@/*)? Yes
What import alias would you like configured? @/*

npmがNext.jsのプロジェクトをいい感じにしてくれてるので、少し待ちます。

NextUIの導入

# 作成したプロジェクト内に移動
$ cd example_nextjs

# NextUIをnpm install
$ npm i @nextui-org/react framer-motion

Tailwind cssのセットアップ

# example_nextjs/tailwind.config.js

import {nextui} from "@nextui-org/react"; // 追記

/** @type {import('tailwindcss').Config} */
const config = {
  content: [
    // ...
    "./node_modules/@nextui-org/theme/dist/**/*.{js,ts,jsx,tsx}" // 追記
  ],
  theme: {
    extend: {},
  },
  darkMode: "class", // 追記
  plugins: [nextui()] // 追記
}

export default config;

プロバイダーのセットアップ

プロバイダーは、Next.jsのプロジェクトをcreateした状態では作成されておりませんので、手動でapp/providers.tsxというファイルを作成する必要があります(createする際に、TypeScriptをNoにした方は、app/providers.jsxを作成してください)。

技術記事なはずなのに、このあたりの仕組みはよくわかっていない。
あまり深く考えず公式のコードを丸々コピペ。

# 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";

export default function RootLayout({children}: { children: React.ReactNode }) {
  return (
    <html lang="en" className='dark'>
      <body>
        <Providers>
          {children}
        </Providers>
      </body>
    </html>
  );
}

ここまででNextUIの導入が完了しました。
それでは実際に、導入できているのかを確認してみましょう。
app/page.tsxを編集します。
デフォルトで記述されているソースは一度、全て消してしまいましょう。

その後、下記のようにapp/page.tsxを修正します。

# app/page.tsx

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

export default function Page() {
  return (
    <div>
      <Button>Click me</Button>
    </div>
  )
}

修正が完了しましたら、さっそく実行します。

$ npm run dev

サーバが立ち上がれば、ブラウザでLocalhost:3000にアクセスしてみましょう。
画面左上にボタンが一つ表示されていれば、導入確認は完了です。

お疲れさまでした。

まとめ

個人的な所感

Next.jsでフロントエンド開発をする際に、あまり深く考えずにセットアップをしているんだなと気づくことができました。
専門分野でないにしろ、もう少し内部的な動きを理解していないと、複雑な処理をする際に躓く可能性を抱えているため、私の今後の課題ですね。

最後まで、読んで頂きありがとうございました。

参考文献

Next.js: 公式ドキュメント
NextUI: 公式ドキュメント(Next.js使用時のセットアップ方法)

追記

2024-02-16

NextUIでは、既にNextUIのセットアップが完了したNext.jsのnpxコマンドを用意してくれていました。

$ npx create-next-app -e https://github.com/nextui-org/next-app-template

私はこれまで何を見ていたというのだ...