85,947
返回整合
next

整合Next.js與 Storybook 整合

Next.js 讓您能夠透過擴展最新的 React 功能來建立全端 Web 應用程式
先決條件

本食譜假設您已安裝 Next >= 12 應用程式。還沒有嗎？請依照 Next 的設定指示，然後執行

# Add Storybook:
npm create storybook@latest

設定您的專案

在沒有 Storybook 的專案中

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

npm create storybook@latest

在有 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