🐧
Nextjs app-routerでNextUIを導入する。
はじめに
Nextjs上のUIモジュールは、Tailwindcssと相性のいいものを選ぶようにしている。UIライブラリが使いたい理由は、簡単なhtmlのUI作成ならTailwindcssを被せて出来上がりとなるが、アコーディオンや、スイッチ、カード、さらにはカレンダー、日付ピッカーなど、実装自体をライブラリー化しなければいけないものがある場合は、UIモジュールを使えばよいか思われる。
試したものは以下の3つ。いずれもnpx create-next-app --typescriptのApp-Router上で、大きな問題もなくインストールできた。今回は
- shadcn-ui
- DaisyUI
- NextUI
のうち、NextUIが仕事で使うかもしれないData Tableが充実していたので、少しさわってみたのでインストールまでの作業をまとめる。
NextUIのインストールの環境
いつも通り、ひな形をインストールする。
package.json
npx create-next-app --typescript
コマンドを入れてでてくる設問は、デフォルトのまま
| 設問 | 入力内容 |
|---|---|
| √ What is your project named? | app-router-nextui |
| √ 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? | No |
NextUIの要求レベル2023/10/08時点ではとなっているので、必要があればアップデートしておく必要があります。Framer Motion は React で利用するアニメーションライブラリ。
Requirements:
React 18 or later
Tailwind CSS 3 or later
Framer Motion 4 or later
NextUIサイト通り、NextUIと framer-motionをインストールします。
npm install @nextui-org/react framer-motion
セットアップ
tailwind.config.tsを最小セットアップにします。
tailwind.config.ts
import type { Config } from 'tailwindcss'
import { nextui } from '@nextui-org/react';
const config: Config = {
content: [
'./src/pages/**/*.{js,ts,jsx,tsx,mdx}',
'./src/components/**/*.{js,ts,jsx,tsx,mdx}',
'./src/app/**/*.{js,ts,jsx,tsx,mdx}',
+ './node_modules/@nextui-org/theme/dist/**/*.{js,ts,jsx,tsx}'
],
- plugins: [],
+ plugins: [nextui()],
}
export default config
app/page.tsxにButtonを追加します。
src/app/page.tsx
"use client"
import {Button} from "@nextui-org/react";
export default function Home() {
return (
<Button color="primary">
Button
</Button>
)
}
結果確認
Webサーバーを起動し確認します
npm run dev
Discussion