Next.js

需求

Next.js 12 或更高版本
React 18 或更高版本
Tailwind CSS 3.4 或更高版本
Framer Motion 11.9 或更高版本

若要在您的 Next.js 專案中使用 NextUI，您需要根據您的專案結構，依照下列步驟進行。

App 目錄設定

Next.js 13 引入了一個新的 app/ 目錄結構。預設情況下，它使用伺服器組件。由於 NextUI 組件使用 React hooks，我們在建置時加入了 use client;，因此您可以直接在您的 React 伺服器組件 (RSC) 中導入它們。

NextUI CLI (建議)

如果您要開始一個新專案，可以使用 NextUI CLI 來建立一個預先設定好 NextUI 的新專案

或

create-next-app

如果您要開始一個新專案，可以執行下列其中一個命令來建立一個預先設定好 NextUI 的 Next.js 專案

自動安裝

您可以使用 CLI 來新增個別元件。例如，要新增按鈕元件

此命令會將按鈕元件新增至您的專案，並管理所有相關的依賴項。

您也可以一次新增多個元件

或者，您可以透過執行下列命令來新增主程式庫 @nextui-org/react

如果您省略元件名稱，CLI 會提示您選取要新增的元件。

您仍然需要手動將 provider 新增到您的應用程式中 (我們正在努力自動化此步驟)。

手動安裝

新增依賴項

在您的 Next.js 專案中，執行下列其中一個指令來安裝 NextUI

提升依賴項設定

注意：此步驟僅適用於使用 pnpm 進行安裝的使用者。如果您使用其他套件管理器安裝 NextUI，則可以跳過此步驟。

如果您正在使用 pnpm，您需要將以下這行加入您的 .npmrc 檔案中，以將我們的套件提升至根目錄的 node_modules。

修改 .npmrc 檔案後，您需要再次執行 pnpm install，以確保依賴項已正確安裝。

Tailwind CSS 設定

NextUI 建構於 Tailwind CSS 之上，因此您需要先安裝 Tailwind CSS。您可以依照官方的安裝指南安裝 Tailwind CSS。然後您需要在您的 tailwind.config.js 檔案中新增以下程式碼

注意：如果您使用 pnpm 和單倉儲架構，請確保您指向的是根目錄的 node_modules

設定提供者

前往您的 app/providers.tsx 或 app/providers.jsx（如果不存在請建立），並使用 NextUIProvider 包裹 Component

將提供者新增至根目錄

現在，前往您的 root 版面配置頁面，並使用 Providers 包裹它

注意：NextUI 會自動將 light 和 dark 兩種主題新增至您的應用程式。您可以透過將 dark/light 類別新增至 html 標籤來使用它們。有關更多詳細資訊，請參閱主題文件。

使用 NextUI 元件

現在，您可以直接在您的伺服器元件中匯入任何 NextUI 元件，而無需使用 use client; 指令

重要 🚨：請注意，您需要從個別套件匯入元件，而不是從 @nextui-org/react 匯入。

Pages 目錄設定