Next.js

必要条件

Next.js 12 以降
React 18 以降
Tailwind CSS 3.4 以降
Framer Motion 11 以降

Next.js プロジェクトで NextUI を使用するには、プロジェクトの構造に応じて以下の手順に従う必要があります。

App ディレクトリのセットアップ

Next.js 13 では、新しい app/ ディレクトリ構造が導入されました。デフォルトでは、Server Components が使用されます。NextUI コンポーネントは React フックを使用するため、ビルド時に use client; を追加しました。これにより、React Server Components (RSC) に直接インポートできます。

NextUI CLI (推奨)

新しいプロジェクトを開始する場合は、NextUI CLI を使用して、NextUI が事前設定された新しいプロジェクトを作成できます。

npm install -g nextui-cli

nextui init -t app

create-next-app

新しいプロジェクトを開始する場合は、次のいずれかのコマンドを実行して、NextUI が事前設定された Next.js プロジェクトを作成できます。

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

自動インストール

CLI を使用して個々のコンポーネントを追加できます。たとえば、ボタンコンポーネントを追加するには、次のようにします。

nextui add button

このコマンドは、プロジェクトに Button コンポーネントを追加し、関連するすべての依存関係を管理します。

複数のコンポーネントを一度に追加することもできます。

nextui add button input

または、次のコマンドを実行してメインライブラリ @nextui-org/react を追加することもできます。

nextui add --all

コンポーネント名を省略すると、CLI が追加するコンポーネントを選択するように求めます。

? 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

プロバイダーは手動でアプリに追加する必要があります (この手順の自動化に取り組んでいます)。

// app/providers.tsx

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>
  );
}

手動インストール

依存関係の追加

Next.js プロジェクトで、次のいずれかのコマンドを実行して NextUI をインストールします。

npm i @nextui-org/react framer-motion

ホイストされた依存関係のセットアップ

注意: この手順は、pnpm を使用してインストールするユーザーのみを対象としています。他のパッケージマネージャーを使用して NextUI をインストールする場合は、この手順をスキップできます。

pnpm を使用している場合は、次の行を .npmrc ファイルに追加して、パッケージをルートの node_modules にホイストする必要があります。

public-hoist-pattern[]=*@nextui-org/*

.npmrc ファイルを変更した後、pnpm install を再度実行して、依存関係が正しくインストールされていることを確認する必要があります。

Tailwind CSS のセットアップ

NextUI は Tailwind CSS の上に構築されているため、最初に Tailwind CSS をインストールする必要があります。Tailwind CSS のインストールについては、公式のインストールガイドを参照してください。次に、次のコードを tailwind.config.js ファイルに追加する必要があります。

注意: pnpm とモノレポアーキテクチャを使用している場合は、ROOT の node_modules を指していることを確認してください。

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

/** @type {import('tailwindcss').Config} */
const config = {
  content: [
    // ...
    // make sure it's pointing to the ROOT node_module
    "./node_modules/@nextui-org/theme/dist/**/*.{js,ts,jsx,tsx}"
  ],
  theme: {
    extend: {},
  },
  darkMode: "class",
  plugins: [nextui()]
}

export default config;

プロバイダーの設定

app/providers.tsx または app/providers.jsx に移動し（存在しない場合は作成）、コンポーネントを NextUIProvider でラップします。

// app/providers.tsx
'use client'

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

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

ルートへのプロバイダーの追加

次に、root レイアウトページに移動し、Providers でラップします。

// 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 は、light と dark の 2 つのテーマをアプリケーションに自動的に追加します。 html タグに dark/light クラスを追加することで、いずれかのテーマを使用できます。詳細については、テーマのドキュメントを参照してください。

NextUI コンポーネントの使用

これで、use client; ディレクティブを使用しなくても、NextUI コンポーネントをサーバーコンポーネントに直接インポートできるようになりました。

// app/page.tsx
import {Button} from '@nextui-org/button'; 

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

重要 🚨: コンポーネントを @nextui-org/react からではなく、個々のパッケージからインポートする必要があることに注意してください。

Pages ディレクトリのセットアップ