storybook addon next
v1.8.0
該插件已被棄用 @Storybook/NextJS，這是Storybook官方插件，用於支持Storybook中的Next.js功能。它支持storybook-addon-next所做的一切！我什至努力與他們一起開發它，所以您應該掌握良好的手段。
有關如何遷移的詳細信息，請諮詢遷移文檔。
？沒有配置支持Next.js ：厭倦了寫作和調試WebPack配置？ Next.js開箱即用的支持，此插件在故事書中成為可能
Next.js的圖像組件（部分支持）
next.js路由
SASS/SCSS
CSS/SASS/SCSS模塊
風格的JSX
Postcss
絕對進口
運行時配置
自定義WebPack配置
打字稿
.js擴展名而不是.mjs擴展名（即next.config.js而不是next.config.mjs ）要運行任何示例，請首先通過在此存儲庫的根部運行
yarn build插件。
使用yarn安裝storybook-addon-next ：
yarn add --dev storybook-addon-next或npm ：
npm install --save-dev storybook-addon-next // .storybook/main.js
module . exports = {
// other config ommited for brevity
addons : [
// ...
'storybook-addon-next'
// ...
]
}？就是這樣！支持的功能應開箱即用。
有關支持功能如何在此附加組中起作用的更多詳細信息，請參見文檔。
如果某些事情無法正常工作，請隨時開放一個問題。
如果需要，可以將此插件傳遞給添加配置的選項對象。
例如：
// .storybook/main.js
const path = require ( 'path' )
module . exports = {
// other config ommited for brevity
addons : [
// ...
{
name : 'storybook-addon-next' ,
options : {
nextConfigPath : path . resolve ( __dirname , '../next.config.js' )
}
}
// ...
]
}nextConfigPath ： next.config.js的絕對路徑眾所周知，很難使用Storybook工作。此插件允許您使用Next.js的Image組件而無需配置！
因為圖像組件具有由需要Next.js配置文件的選項配置的功能，例如圖像優化。
如果您想看到更好的支持，請隨時為Next.js的討論做出貢獻。
本地圖像與此插件可以正常工作！請記住，此功能僅在Next.js V11中添加。
import Image from 'next/image'
import profilePic from '../public/me.png'
function Home ( ) {
return (
< >
< h1 > My Homepage </ h1 >
< Image
src = { profilePic }
alt = "Picture of the author"
// width={500} automatically provided
// height={500} automatically provided
// blurDataURL="../public/me.png" set to equal the image itself (for this addon)
// placeholder="blur" // Optional blur-up while loading
/>
< p > Welcome to my homepage! </ p >
</ >
)
} 遠程圖像也可以正常工作！
import Image from 'next/image'
export default function Home ( ) {
return (
< >
< h1 > My Homepage </ h1 >
< Image
src = "/me.png"
alt = "Picture of the author"
width = { 500 }
height = { 500 }
/>
< p > Welcome to my homepage! </ p >
</ >
)
} 所有Next.js Image S自動為您不利。
如果使用佔位符=“ blur”，則使用的Blurdataurl是圖像的SRC（從而有效地禁用了佔位符）。
有關Sorybook的處理方式，請參閱此問題以獲取有關Next.js Image S的更多討論。
此插件尚未支持這種格式。如果您想看到的話，請隨時打開一個問題。
該解決方案在Storybook-Addon-next-Router上大量基於，非常感謝lifeiscontent提供了一個很好的解決方案，該解決方案可以使該解決方案可以使用。
Next.js的路由器自動為您固定，因此當路由器與路由器進行交互時，如果您擁有Actions Addon，則將其所有交互都自動記錄到Storybook Action Tab。
可以通過將nextRouter屬性添加到故事參數中來完成每個層次的覆蓋。插件將淺薄地合併您在這裡放入路由器的任何東西。
import SomeComponentThatUsesTheRouter from "./SomeComponentThatUsesTheRouter" ;
export default {
title : "My Story" ,
} ;
// if you have the actions addon
// you can click the links and see the route change events there
export const Example = ( ) => < SomeComponentThatUsesTheRouter /> ;
Example . parameters : {
nextRouter : {
path : "/profile/[id]" ,
asPath : "/profile/ryanclementshax" ,
query : {
id : "ryanclementshax"
}
}
}請參閱此示例以獲取參考。
可以在preview.js中設置全局默認值，並將與默認路由器合併。
export const parameters = {
nextRouter : {
path : '/some-default-path' ,
asPath : '/some-default-path' ,
query : { }
}
}請參閱此示例以獲取參考。
固定路由器上的默認值如下（有關全球群體的工作方式，請參見Globals）
const defaultRouter = {
locale : context ?. globals ?. locale ,
route : '/' ,
pathname : '/' ,
query : { } ,
asPath : '/' ,
push ( ... args : unknown [ ] ) {
action ( 'nextRouter.push' ) ( ... args )
return Promise . resolve ( true )
} ,
replace ( ... args : unknown [ ] ) {
action ( 'nextRouter.replace' ) ( ... args )
return Promise . resolve ( true )
} ,
reload ( ... args : unknown [ ] ) {
action ( 'nextRouter.reload' ) ( ... args )
} ,
back ( ... args : unknown [ ] ) {
action ( 'nextRouter.back' ) ( ... args )
} ,
prefetch ( ... args : unknown [ ] ) {
action ( 'nextRouter.prefetch' ) ( ... args )
return Promise . resolve ( )
} ,
beforePopState ( ... args : unknown [ ] ) {
action ( 'nextRouter.beforePopState' ) ( ... args )
} ,
events : {
on ( ... args : unknown [ ] ) {
action ( 'nextRouter.events.on' ) ( ... args )
} ,
off ( ... args : unknown [ ] ) {
action ( 'nextRouter.events.off' ) ( ... args )
} ,
emit ( ... args : unknown [ ] ) {
action ( 'nextRouter.events.emit' ) ( ... args )
}
} ,
isFallback : false
} 如果您覆蓋功能，則會將失去“自動操作”選項卡集成，因此必須自己構建它。
export const parameters = {
nextRouter : {
push ( ) {
// we lose the default implementation that logs the action into the action tab
}
}
}自己做這個看起來像這樣的東西（請確保安裝@storybook/addon-actions軟件包）：
import { action } from '@storybook/addon-actions'
export const parameters = {
nextRouter : {
push ( ... args ) {
// custom logic can go here
// this logs to the actions tab
action ( 'nextRouter.push' ) ( ... args )
// return whatever you want here
return Promise . resolve ( true )
}
}
}支持全局SASS/SCSS樣式表，也沒有任何其他配置。只需將它們導入Preview.js
import '../styles/globals.scss'這將在您的next.config.js文件中自動包含您的任何自定義SASS配置。
目前，僅支持Next.js配置的
.js擴展名，而不是.mjs。有關更多詳細信息，請參見Next.config.js。
const path = require ( 'path' )
module . exports = {
// any options here are included in sass compilation for your stories
sassOptions : {
includePaths : [ path . join ( __dirname , 'styles' ) ]
}
}Next.js支持CSS模塊開箱即用，因此此插件也支持它。
// this import works just fine in Storybook now
import styles from './Button.module.css'
// sass/scss is also supported
// import styles from './Button.module.scss'
// import styles from './Button.module.sass'
export function Button ( ) {
return (
< button type = "button" className = { styles . error } >
Destroy
</ button >
)
}next.js中的JS解決方案中的內置CSS是樣式的JSX，此插件也支持開箱即用的零配置。
// This works just fine in Storybook with this addon
function HelloWorld ( ) {
return (
< div >
Hello world
< p > scoped! </ p >
< style jsx > { `
p {
color: blue;
}
div {
background: red;
}
@media (max-width: 600px) {
div {
background: blue;
}
}
` } </ style >
< style global jsx > { `
body {
background: black;
}
` } </ style >
</ div >
)
}
export default HelloWorld您也可以使用自己的babel配置。這是您如何自定義樣式JSX的一個示例。
// .babelrc or whatever config file you use
{
"presets" : [
[
" next/babel " ,
{
"styled-jsx" : {
"plugins" : [ " @styled-jsx/plugin-sass " ]
}
}
]
]
}如果您使用MonorePo，則可能需要將Babel配置添加到故事書項目中。只需將Babel配置添加到您的故事書項目中，並使用以下內容開始。
{
"presets" : [ " next/babel " ]
}Next.js可讓您自定義PostCSS配置。因此，此插件將自動為您處理您的PostCSS配置。
這允許零配置parwindcss之類的很酷的東西！請參閱with-tailwindcss示例以獲取參考！它是Next.js的tailwindcss示例，該示例與故事書和此插件建立。
再見../ ！從根目錄工作中的絕對導入此插件可以很好地進口。
// All good!
import Button from 'components/button'
// Also good!
import styles from 'styles/HomePage.module.css'
export default function HomePage ( ) {
return (
< >
< h1 className = { styles . title } > Hello World </ h1 >
< Button />
</ >
)
} // preview.js
// Also ok in preview.js!
import 'styles/globals.scss'
// ...next.js允許運行時配置，該配置使您可以導入方便的getConfig函數，以在運行時在next.config.js文件中獲取某些配置。
在使用此插件的故事書的上下文中，您可以期待Next.js的運行時配置功能可以正常工作。
注意，由於Storybook沒有渲染您的組件，因此您的組件只會看到他們通常在客戶端看到的內容（即他們不會看到serverRuntimeConfig ，但會看到publicRuntimeConfig ）。
例如，請考慮以下Next.js配置：
// next.config.js
module . exports = {
serverRuntimeConfig : {
mySecret : 'secret' ,
secondSecret : process . env . SECOND_SECRET // Pass through env variables
} ,
publicRuntimeConfig : {
staticFolder : '/static'
}
}在Storybook中調用時， getConfig的呼叫將返回以下對象：
{
"serverRuntimeConfig" : {},
"publicRuntimeConfig" : {
"staticFolder" : " /static "
}
}next.js提供了很多免費的東西，例如SASS支持，但有時我們將自定義的WebPack配置修改添加到Next.js。該插件負責您要添加的大多數WebPack修改。如果Next.js支持開箱即用的功能，那麼此插件將使該功能在Storybook中開箱即用。如果Next.js不支持開箱即用的東西，但是可以易於配置，那麼此插件將為故事書做同樣的事情。如果您發現仍然需要配置WebPack以獲取next.js功能以在添加此插件後在故事書中工作的內容，這可能是一個錯誤，請隨時打開問題。
根據Storybook的文檔，應在.Storybook/Main.js中進行故事書所需的任何WebPack修改。
注意：並非所有的WebPack修改都是在next.config.js和.storybook/main.js之間複製/粘貼的。建議您對如何正確修改Storybook的WebPack配置以及WebPack的工作方式進行重新搜索。
請隨時為幫助社區提供榜樣。
以下是如何使用此插件將SVGR支持添加到Storybook中的示例。完整的示例可以在這裡找到。
// .storybook/main.js
module . exports = {
// other config omitted for brevity
webpackFinal : async config => {
// this modifies the existing image rule to exclude .svg files
// since we want to handle those files with @svgr/webpack
const imageRule = config . module . rules . find ( rule => rule . test . test ( '.svg' ) )
imageRule . exclude = / .svg$ /
// configure .svg files to be loaded with @svgr/webpack
config . module . rules . push ( {
test : / .svg$ / ,
use : [ '@svgr/webpack' ]
} )
return config
}
}Storybook處理大多數打字稿配置，但是此插件為Next.js對絕對導入和模塊路徑別名的支持增加了支持。簡而言之，它考慮了您的tsconfig.json的baseurl和路徑。因此，像下面的tsconfig.json可以從開箱即用。
{
"compilerOptions" : {
"baseUrl" : " . " ,
"paths" : {
"@/components/*" : [ " components/* " ]
}
}
}目前，此插件支持的唯一支持的next.js是config的commonjs版本（即next.config.js ）。這主要是因為我尚未弄清楚如何從故事書插件中需要.mjs文件（據我所知，該文件與CommonJS模塊綁定在一起）。如果您能夠提供幫助，那麼如果您可以為此提供支持，我會很喜歡它，如果可能的支持甚至可以為.mjs版本提供支持。
如果您使用的是紗線V2或V3，則可能會遇到故事書無法解析style-loader或css-loader問題。例如，您可能會遇到錯誤：
Module not found: Error: Can't resolve 'css-loader'
Module not found: Error: Can't resolve 'style-loader'
這是因為這些版本的紗線具有不同的包裝分辨率規則與紗線V1.x。如果是您的情況，只需直接安裝軟件包。
確保您在正常開發中使用下一個圖像時，以相同的方式處理圖像導入。
在storybook-addon-next之前，Image導入了圖像的原始路徑（例如'static/media/stories/assets/plugin.svg' ）。使用storybook-addon-next圖像導入工作“ next.js方式”，這意味著我們現在在導入圖像時會得到一個對象。例如：
{
"src" : " static/media/stories/assets/plugin.svg " ,
"height" : 48 ,
"width" : 48 ,
"blurDataURL" : " static/media/stories/assets/plugin.svg "
}因此，如果故事書中的某些內容未正確顯示圖像，請確保您期望將對像從導入而不是資產路徑返回。
有關Next.js如何處理靜態圖像導入的更多詳細信息，請參見本地圖像。
現在使用next.config.mjs不支持此插件。有關更多詳細信息，請參見Next.config.js。現在，您需要使用.js擴展名。請隨時提供討論，以獲得支持。
如果您使用紗線V2或V3，則可能會得到這個。有關更多詳細信息，請參見YARN V2和V3用戶的註釋。
我願意討論。隨時開放一個問題。
這個文檔不足您嗎？
很困惑嗎？
是...我敢說...不准確嗎？
如果以上任何一個描述了您對本文檔的感覺。隨時開放一個問題。
