CLI

CLIは、NextUIプロジェクトを初期化、管理、改善するための包括的なコマンドスイートを提供します。個々のコンポーネントの追加、削除、またはアップグレード、プロジェクトの健全性の評価などを行うことができます。

インストール

要件

Node.js バージョン 18.17.x 以降

グローバルインストール

CLIをグローバルにインストールするには、ターミナルで次のいずれかのコマンドを実行します。

npm install nextui-cli -g

インストールなし

または、npxを使用することで、グローバルインストールなしでCLIを使用できます。

npx nextui-cli@latest

クイックスタート

CLIがインストールされたら、次のコマンドを実行して利用可能なコマンドを表示します。

nextui

これにより、次のヘルプ出力が生成されます。

NextUI CLI <version>

A command line tool for seamless integration with NextUI

Usage: nextui [command]

Options:
  -v, --version  Show the version number
  --no-cache     Disable cache, by default data will be cached for 30m after the first request
  -h, --help     Display help for commands

Commands:
  init [options] [projectName]       Start a new NextUI project
  add [options] [components...]      Add NextUI components to your project
  upgrade [options] [components...]  Update NextUI components to the latest versions
  remove [options] [components...]   Remove NextUI components from your project
  list [options]                     Show details of installed components
  env [options]                      Display debug information about the local environment
  doctor [options]                   Diagnose problems in your project
  help [command]                     Get help on a specific command

init

initコマンドを使用して、新しいNextUIプロジェクトを初期化します。これにより、必要な構成でプロジェクトがセットアップされます。

nextui init my-nextui-app

プロジェクトを構成するように求められます。

┌  Create a new project
│
◇  Select a template (Enter to select)
│  ● App (A Next.js 14 with app directory template pre-configured with NextUI (v2) and Tailwind CSS.)
│  ○ Pages (A Next.js 14 with pages directory template pre-configured with NextUI (v2) and Tailwind CSS.)
│  ○ Vite (A Vite template pre-configured with NextUI (v2) and Tailwind CSS.)
│
◇  New project name (Enter to skip with default name)
│  my-nextui-app
│
◇  Select a package manager (Enter to select)
│  ● npm
│  ○ yarn
│  ○ pnpm
│  ○ bun
│
◇  Template created successfully!
│
◇  Next steps ───────╮
│                    │
│  cd my-nextui-app  │
│  npm install       │
│                    │
├────────────────────╯
│
└  🚀 Get started with npm run dev

依存関係をインストールしてローカルサーバーを起動します。

cd my-nextui-app && npm install

ローカルサーバーを起動します。

npm run dev

追加

addコマンドを使ってNextUIプロジェクトにコンポーネントを追加します。このコマンドは、コンポーネントの依存関係を管理し、プロジェクト構成を更新します。

特定のコンポーネントを指定しない場合

nextui add

追加したいコンポーネントを選択するように求められます

? Which components would you like to add? › - Space to select. Return to submit
Instructions:
    ↑/↓: Highlight option
    ←/→/[space]: Toggle selection
    [a,b,c]/delete: Filter choices
    enter/return: Complete answer

Filtered results for: Enter something to filter

◯  accordion
◯  autocomplete
◯  avatar
◯  badge
◯  breadcrumbs
◉  button
◯  card
◯  checkbox
◯  chip
◯  code

特定のコンポーネントを追加するには

nextui add button

コンポーネントの追加を確認する出力が表示されます

Adding the required dependencies: @nextui-org/button

Tailwind CSS settings have been updated in: /project-path/tailwind.config.js

✅ Components added successfully

アップグレード

プロジェクト内の特定のNextUIコンポーネントを、アップグレードコマンドを使用して最新の状態に保ちます。

nextui upgrade button

アップグレードの確認を求められます


╭───────────────────────── Component ─────────────────────────╮
│  @nextui-org/button              ^2.0.11  ->  ^2.0.31       │
╰─────────────────────────────────────────────────────────────╯

Required min version: @nextui-org/theme>=2.1.0, tailwindcss>=3.4.0
╭───────────────────── PeerDependencies ─────────────────────╮
│  @nextui-org/theme               2.0.1    ->  2.1.0        │
│  tailwindcss                     ^3.2.3   ->  ^3.4.0       │
╰────────────────────────────────────────────────────────────╯
2 minor, 1 patch

? Would you like to proceed with the upgrade? › - Use arrow-keys. Return to submit.
❯   Yes
    No

確認後、コマンドが実行され、次のような出力が表示されます

✅ Upgrade complete. All components are up to date.

削除

removeコマンドを使用してNextUIプロジェクトからコンポーネントを削除します。これにより、プロジェクトのコンポーネント構造と依存関係の管理が容易になります。

nextui remove button

確認プロンプトが表示されます

❗️ Components slated for removal:
╭──────────────────────────────────────────────────────────────────────────────────────────────────────────────╮
│   Package              │   Version              │   Status   │   Docs                                        │
│──────────────────────────────────────────────────────────────────────────────────────────────────────────────│
│   @nextui-org/button   │   2.0.27 🚀latest      │   stable   │   https://nextui.dokyumento.jp/docs/components/button   │
╰──────────────────────────────────────────────────────────────────────────────────────────────────────────────╯

? Confirm removal of these components: › - Use arrow-keys. Return to submit.
❯   Yes
    No

確認後、出力に削除の成功が表示されます

✅ Successfully removed the specified NextUI components: @nextui-org/button

Current installed components:

╭───────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────╮
│   Package                    │   Version              │   Status    │   Docs                                              │
│───────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────│
│   @nextui-org/autocomplete   │   2.0.10 🚀latest      │   newPost   │   https://nextui.dokyumento.jp/docs/components/autocomplete   │
│   @nextui-org/badge          │   2.0.24 🚀latest      │   stable    │   https://nextui.dokyumento.jp/docs/components/badge          │
│   @nextui-org/button         │   2.0.27 🚀latest      │   stable    │   https://nextui.dokyumento.jp/docs/components/button         │
│   @nextui-org/chip           │   2.0.25 🚀latest      │   stable    │   https://nextui.dokyumento.jp/docs/components/chip           │
╰───────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────╯

ドクター

doctorコマンドを使用して、プロジェクト内の問題を診断して解決します。これにより、プロジェクトの健全性と適切な構成が確保されます。

nextui doctor

プロジェクトの状態に応じて、次のようなものが表示される場合があります

✅ Your project has no detected issues.

または、問題が検出された場合は

❌ Your project has 1 issue that requires attention

環境

envコマンドを使用して、プロジェクトの環境設定に関する詳細情報を表示します。これには、システム、依存関係、構成の詳細が含まれます。

nextui env

出力には、現在の環境設定が反映されます

Current installed components:

╭───────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────╮
│   Package                    │   Version              │   Status    │   Docs                                              │
│───────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────│
│   @nextui-org/autocomplete   │   2.0.10 🚀latest      │   newPost   │   https://nextui.dokyumento.jp/docs/components/autocomplete   │
│   @nextui-org/badge          │   2.0.24 🚀latest      │   stable    │   https://nextui.dokyumento.jp/docs/components/badge          │
│   @nextui-org/button         │   2.0.27 🚀latest      │   stable    │   https://nextui.dokyumento.jp/docs/components/button         │
│   @nextui-org/chip           │   2.0.25 🚀latest      │   stable    │   https://nextui.dokyumento.jp/docs/components/chip           │
╰───────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────╯

Environment Info:
  System:
    OS: darwin
    CPU: arm64
  Binaries:
    Node: v18.18.2

APIリファレンス

APIリファレンスで、完全なCLIコマンドと機能を確認してください。

アップデートとソースコードについては、GitHubリポジトリをご覧ください。