v2へのアップグレード

要件

Next.js アップグレード手順

v2 にアップグレードするには、前の手順に必ず従ってください。

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

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

インストール

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

npm i @nextui-org/react framer-motion

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

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

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

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

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

Tailwind CSS のセットアップ

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

// tailwind.config.js
const { nextui } = require("@nextui-org/react");

/** @type {import('tailwindcss').Config} */
module.exports = {
  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()]
}

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

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 レイアウトページに移動し、それを 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 は自動的に 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 ディレクトリのセットアップ

インストール

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

npm i @nextui-org/react framer-motion

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

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

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

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

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

Tailwind CSS のセットアップ

// tailwind.config.js
const { nextui } = require("@nextui-org/react");

/** @type {import('tailwindcss').Config} */
module.exports = {
  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()]
}

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

pages/_app.js または pages/_app.tsx (存在しない場合は作成してください) に移動し、コンポーネントを NextUIProvider でラップします。

// pages/_app.js
import {NextUIProvider} from '@nextui-org/react'

function MyApp({ Component, pageProps }) {
  return (
    <NextUIProvider>
      <Component {...pageProps} />
    </NextUIProvider>
  )
}

export default MyApp;

NextUI コンポーネントの使用

これで、任意の NextUI コンポーネントを好きな場所にインポートできます。

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

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

React のアップグレード手順

React バージョンのアップグレード

NextUI v2 では React 18 以降が必要です。React をアップグレードするには、次のコマンドを実行します。

npm i react@latest react-dom@latest

Framer motion のインストール

v2 では、NextUI は依存関係として framer-motion を必要とするようになりました。両方をインストールするには、次のコマンドを使用します。

npm i framer-motion

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

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

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

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

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

TailwindCSS のセットアップ

NextUI v2 では Tailwind CSS を使用するようになりました。NextUI プラグインを tailwind.config.js ファイルに追加します。

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

// tailwind.config.js
const { nextui } = require("@nextui-org/react");

/** @type {import('tailwindcss').Config} */
module.exports = {
  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()]
}

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

root ファイルに移動し、コンポーネントを NextUIProvider でラップします。

// src/main.jsx
import React from 'react'
import ReactDOM from 'react-dom/client'
import {NextUIProvider} from '@nextui-org/react'
import App from './App'
import './index.css'

ReactDOM.createRoot(document.getElementById('root') as HTMLElement).render(
  <React.StrictMode>
    <NextUIProvider>
      <App />
    </NextUIProvider>
  </React.StrictMode>,
)

NextUI コンポーネントの使用

これで、任意の NextUI コンポーネントを好きな場所にインポートできます。

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

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

新機能と破壊的な変更の詳細については、リリースノートをご覧ください。