升級至 v2

安裝

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

提升依賴項設定

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

如果您正在使用 pnpm，您需要在 .npmrc 檔案中新增以下程式碼，將我們的套件提升至根目錄 node_modules。

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

Tailwind CSS 設定

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

設定 Provider

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

將 Provider 新增至根目錄

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

注意：NextUI 會自動將兩個主題 light 和 dark 新增至您的應用程式。您可以透過將 dark/light 類別新增至 html 標籤來使用其中任何一個。請參閱主題文件以取得更多詳細資訊。

使用 NextUI 元件

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

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

安裝

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

提升依賴項設定

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

如果您正在使用 pnpm，您需要在 .npmrc 檔案中新增以下程式碼，將我們的套件提升至根目錄 node_modules。

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

Tailwind CSS 設定

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

設定 Provider

前往 pages/_app.js 或 pages/_app.tsx (如果不存在，請建立它)，並使用 NextUIProvider 包裹 Component

使用 NextUI 元件

現在您可以在任何地方導入任何 NextUI 元件

升級 React 版本

NextUI v2 需要 React 18 或更高版本。若要升級 React，請執行以下指令

安裝 Framer motion

在 v2 中，NextUI 現在需要 framer-motion 作為依賴項。若要安裝兩者，請使用以下指令

提升依賴項設定

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

如果您正在使用 pnpm，您需要在 .npmrc 檔案中新增以下程式碼，將我們的套件提升至根目錄 node_modules。

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

TailwindCSS 設定

NextUI v2 現在使用 Tailwind CSS。將 NextUI 外掛程式新增到您的 tailwind.config.js 檔案中

注意：如果您使用 pnpm 和 monorepo 架構，請確保您指向 ROOT node_modules

Provider 設定

前往 root 檔案，並使用 NextUIProvider 包裹元件

使用 NextUI 元件

現在您可以在任何地方導入任何 NextUI 元件