84,593
返回整合
next

整合Next.js與 Storybook

Next.js 讓您能夠藉由擴展最新的 React 功能來建立全端網路應用程式
先決條件

本指南假設您已擁有 Next >= 12 應用程式。如果沒有，請依照 Next 的安裝說明，然後執行

# Add Storybook:
npx storybook@latest init

設定您的專案

在沒有 Storybook 的專案中

在您的 Next.js 專案的根目錄中執行此命令後，按照提示操作

npx storybook@latest init

在有 Storybook 的專案中

這個框架旨在與 Storybook 7 搭配使用。如果您尚未使用 v7，請使用以下命令升級

npx storybook@latest upgrade

自動移轉

執行上述升級命令時，您應該會收到提示，要求您移轉至 @storybook/nextjs，這應該會為您處理一切。如果自動移轉不適用於您的專案，請參閱下面的手動移轉。

手動移轉

安裝框架

yarn add -D @storybook/nextjs

更新您的 main.js 以變更框架屬性

// .storybook/main.js
 
export default {
  // ...
  framework: {
    // name: '@storybook/react-webpack5', // Remove this
    name: '@storybook/nextjs', // Add this
    options: {},
  },
};

如果您先前使用 Storybook 外掛程式與 Next.js 整合，使用此框架後就不再需要這些外掛程式，可以移除

// .storybook/main.js
 
export default {
  // ...
  addons: [
    // ...
    // These can both be removed
    // 'storybook-addon-next',
    // 'storybook-addon-next-router',
  ],
};

（實驗性）SWC 支援

如果您正在使用已使用 SWC 的 Next.js 專案（例如，14 或更高版本），您可以將以下內容新增至 main.js，在 Storybook 中啟用它

// .storybook/main.js
 
export default {
  // ...
  framework: {
    name: '@storybook/nextjs',
    options: {
      builder: {
        useSWC: true, // Enables SWC support
      },
    },
  },
};

SWC 支援是在 7.6 版中導入，目前處於實驗階段，可能不適用於所有專案。如果您遇到任何問題，請在 GitHub 上開啟討論與我們聯繫。

參與其中

現在您已準備好將 Next.js 與 Storybook 搭配使用。🎉 如果您在工作中使用 Nextjs，我們很樂意收到您對 Next + Storybook 體驗的回饋。

在Discord中加入維護人員和我們蓬勃發展的社群。

標籤
貢獻者
  • ShaunEvening
    ShaunEvening