storybook addon next
v1.8.0
Addon นี้ได้รับการเลิกใช้เพื่อสนับสนุน @Storybook/Nextjs ซึ่งเป็น Addon อย่างเป็นทางการของนิทานสำหรับการสนับสนุนคุณสมบัติ next.js ในนิทาน รองรับทุกสิ่ง storybook-addon-next ทำและอีกมากมาย! ฉันยังทำงานเกี่ยวกับการพัฒนาสิ่งนี้กับพวกเขาดังนั้นคุณควรอยู่ในมือที่ดี
ปรึกษาเอกสารการย้ายถิ่นสำหรับรายละเอียดเกี่ยวกับวิธีการโยกย้าย
- ไม่มีการสนับสนุนการกำหนดค่าสำหรับ next.js : เหนื่อยกับการเขียนและการดีบักการกำหนดค่า webpack config? สิ่งที่ next.js รองรับนอกกรอบ addon นี้ทำให้เป็นไปได้ในนิทาน
ส่วนประกอบรูปภาพของ Next.js (การสนับสนุนบางส่วน)
next.js การกำหนดเส้นทาง
SASS/SCSS
โมดูล CSS/SASS/SCSS
JSX สไตล์
postcss
การนำเข้าสัมบูรณ์
การกำหนดค่ารันไทม์
กำหนดค่า webpack ที่กำหนดเอง
ตัวพิมพ์ใหญ่
.js ไม่ใช่ส่วนขยาย .mjs (เช่น next.config.js ไม่ใช่ next.config.mjs )ในการเรียกใช้ตัวอย่างใด ๆ ให้สร้าง addon โดยใช้
yarn buildในรากของ repo นี้
ติดตั้ง storybook-addon-next โดยใช้ yarn :
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'
// ...
]
}- นั่นมัน! คุณสมบัติที่รองรับควรทำงานนอกกรอบ
ดูเอกสารสำหรับรายละเอียดเพิ่มเติมเกี่ยวกับวิธีการทำงานของคุณสมบัติที่รองรับใน addon นี้
หากสิ่งที่ไม่ได้ผลตามที่คุณคาดหวังอย่าลังเลที่จะเปิดปัญหา
Addon นี้สามารถส่งผ่านวัตถุตัวเลือกสำหรับการกำหนดค่าเสริมหากจำเป็น
ตัวอย่างเช่น:
// .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 ถัดไป/ภาพเป็นเรื่องยากที่จะทำงานกับหนังสือนิทาน Addon นี้ช่วยให้คุณสามารถใช้ส่วนประกอบ Image ของ Next.js โดยไม่มีการกำหนดค่า!
เนื่องจากองค์ประกอบของรูปภาพมีคุณสมบัติเช่นการเพิ่มประสิทธิภาพรูปภาพที่กำหนดค่าโดยตัวเลือกที่ต้องใช้ไฟล์กำหนดค่าต่อไปของ JS ที่จะอ่านและประมวลผลโดยเฟรมเวิร์กและไม่มีฟังก์ชั่นสาธารณะที่เปิดเผยโดย next.js เพื่อแก้ไขและตัวเลือกเหล่านั้นจึงไม่สามารถรองรับคุณสมบัติเหล่านั้นได้อย่างเสถียร
หากคุณต้องการเห็นสิ่งนี้ได้รับการสนับสนุนที่ดีขึ้นอย่าลังเลที่จะมีส่วนร่วมในการอภิปรายในด้านถัดไปของ JS หรือการอภิปรายในด้านของเรา
ภาพท้องถิ่นทำงานได้ดีกับ Addon นี้! โปรดทราบว่าคุณลักษณะนี้ถูกเพิ่มเข้ามาใน 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 ทั้งหมดจะไม่ได้รับการปรับให้เหมาะสมสำหรับคุณโดยอัตโนมัติ
หากใช้ placeholder = "เบลอ" blurdataurl ที่ใช้คือ SRC ของภาพ (ดังนั้นจึงปิดการใช้งานตัวยึดตำแหน่งได้อย่างมีประสิทธิภาพ)
ดูปัญหานี้สำหรับการอภิปรายเพิ่มเติมเกี่ยวกับวิธีการจัดการ Image s Next.js สำหรับนิทาน
รูปแบบนี้ยังไม่รองรับโดย Addon นี้ อย่าลังเลที่จะเปิดปัญหาถ้านี่คือสิ่งที่คุณต้องการเห็น
โซลูชันนี้มีพื้นฐานมาจากนิทาน-Addon-Next-Router อย่างมากดังนั้นจึงเป็นเรื่องที่ดีมากสำหรับ lifeiscontent สำหรับการจัดหาทางออกที่ดีที่ Addon นี้สามารถทำงานได้
Next.js ของเราเตอร์จะถูกตบเบา ๆ สำหรับคุณโดยอัตโนมัติดังนั้นเมื่อเราเตอร์มีปฏิสัมพันธ์กับการโต้ตอบทั้งหมดของมันจะถูกบันทึกโดยอัตโนมัติไปยังแท็บการกระทำของหนังสือนิทานหากคุณมีการกระทำเพิ่มเติม
การแทนที่แบบต่อชั้นสามารถทำได้โดยการเพิ่มคุณสมบัติ nextRouter ลงในพารามิเตอร์เรื่องราว Addon จะรวมสิ่งที่คุณใส่ไว้ในเราเตอร์อย่างตื้นเขิน
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 : { }
}
}ดูตัวอย่างนี้สำหรับการอ้างอิง
ค่าเริ่มต้นของเราเตอร์ stubbed มีดังนี้ (ดู Globals สำหรับรายละเอียดเพิ่มเติมเกี่ยวกับวิธีการทำงานของ 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' สิ่งนี้จะรวมการกำหนดค่า SASS ที่กำหนดเองของคุณโดยอัตโนมัติในไฟล์ next.config.js ของคุณ
ตอนนี้เฉพาะส่วนขยาย
.jsของการกำหนดค่า next.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 ออกจากกล่องดังนั้น Addon นี้ก็รองรับได้เช่นกัน
// 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 >
)
}CSS ในตัวในการแก้ปัญหา JS สำหรับ Next.js เป็นสไตล์ -JSX และ Addon นี้รองรับสิ่งนั้นออกจากกล่องด้วยเช่นกันการกำหนดค่าเป็นศูนย์
// 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 ของคุณเองได้เช่นกัน นี่คือตัวอย่างของวิธีที่คุณสามารถปรับแต่ง StyleD-JSX
// .babelrc or whatever config file you use
{
"presets" : [
[
" next/babel " ,
{
"styled-jsx" : {
"plugins" : [ " @styled-jsx/plugin-sass " ]
}
}
]
]
}หากคุณใช้ monorepo คุณอาจต้องเพิ่มการกำหนดค่า Babel ตัวเองลงในโครงการนิทานของคุณ เพียงเพิ่ม Babel Config ในโครงการนิทานของคุณด้วยเนื้อหาต่อไปนี้เพื่อเริ่มต้น
{
"presets" : [ " next/babel " ]
}next.js ให้คุณปรับแต่ง postcss config ดังนั้น Addon นี้จะจัดการ postcss config ของคุณโดยอัตโนมัติ
สิ่งนี้ช่วยให้สิ่งดีๆเช่น Zero Config Tailwindcss! ดูตัวอย่าง With-Tailwindcss สำหรับการอ้างอิง! มันเป็นโคลนของ tailwindcss ของ tailwindcss ของ Next.js ตั้งค่ากับนิทานและ addon นี้
ลาก่อน ../ / ! การนำเข้าสัมบูรณ์จากไดเรกทอรีรากทำงานได้ดีกับ Addon นี้
// 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 ของคุณที่รันไทม์
ในบริบทของหนังสือนิทานที่มี addon นี้คุณสามารถคาดหวังคุณสมบัติการกำหนดค่ารันไทม์ของ JS Next.js ให้ทำงานได้ดี
หมายเหตุเนื่องจากนิทานไม่ได้แสดงส่วนประกอบของคุณส่วนประกอบของคุณจะเห็นสิ่งที่พวกเขา publicRuntimeConfig ตามปกติในฝั่ง serverRuntimeConfig เท่านั้น
ตัวอย่างเช่นพิจารณาการกำหนดค่าต่อไปนี้ต่อไปนี้:
// next.config.js
module . exports = {
serverRuntimeConfig : {
mySecret : 'secret' ,
secondSecret : process . env . SECOND_SECRET // Pass through env variables
} ,
publicRuntimeConfig : {
staticFolder : '/static'
}
} การโทรไปที่ getConfig จะส่งคืนวัตถุต่อไปนี้เมื่อเรียกภายในนิทาน:
{
"serverRuntimeConfig" : {},
"publicRuntimeConfig" : {
"staticFolder" : " /static "
}
}Next.js มาพร้อมกับสิ่งต่าง ๆ มากมายฟรีจากกล่องเช่น Sass Support แต่บางครั้งเราเพิ่มการปรับเปลี่ยนการกำหนดค่า Webpack ที่กำหนดเองใน Next.js. Addon นี้ดูแลการปรับเปลี่ยน webpack ส่วนใหญ่ที่คุณต้องการเพิ่ม หาก Next.js รองรับคุณสมบัตินอกกรอบแล้ว Addon นี้จะทำให้คุณลักษณะนั้นทำงานนอกกรอบในนิทาน หาก next.js ไม่สนับสนุนบางสิ่งบางอย่างนอกกรอบ แต่ทำให้ง่ายต่อการกำหนดค่า Addon นี้จะทำเช่นเดียวกันกับสิ่งนั้นสำหรับหนังสือนิทาน หากคุณพบสิ่งที่คุณยังต้องกำหนดค่า WebPack เพื่อรับคุณสมบัติถัดไป JS เพื่อทำงานในนิทานหลังจากเพิ่ม addon นี้นี่น่าจะเป็นข้อผิดพลาดและโปรดอย่าลังเลที่จะเปิดปัญหา
การปรับเปลี่ยน webpack ใด ๆ ที่ต้องการสำหรับหนังสือนิทานควรทำใน. storybook/main.js ตามเอกสารของนิทาน
หมายเหตุ: การดัดแปลง WebPack ทั้งหมดไม่ได้เป็นสำเนา/วาง-สามารถใช้งานได้ระหว่าง next.config.js และ .storybook/main.js ขอแนะนำให้ทำซ้ำวิธีการทำ modifcation ของคุณอย่างถูกต้องกับการกำหนดค่า WebPack ของ Storybook และวิธีการทำงานของ WebPack
โปรดอย่าลังเลที่จะมีส่วนร่วมในการช่วยเหลือชุมชน
ด้านล่างเป็นตัวอย่างของวิธีเพิ่มการสนับสนุน SVGR ให้กับนิทานด้วย addon นี้ ตัวอย่างเต็มสามารถพบได้ที่นี่
// .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
}
} หนังสือนิทานจัดการการกำหนดค่า TypeScript ส่วนใหญ่ แต่ Addon นี้จะเพิ่มการสนับสนุนเพิ่มเติมสำหรับการสนับสนุนของ Next.js สำหรับการนำเข้าแบบสัมบูรณ์และนามแฝงเส้นทางโมดูล ในระยะสั้นจะคำนึงถึง baseurl และเส้นทางของ tsconfig.json ของคุณ ดังนั้น tsconfig.json เหมือนด้านล่างจะทำงานนอกกรอบ
{
"compilerOptions" : {
"baseUrl" : " . " ,
"paths" : {
"@/components/*" : [ " components/* " ]
}
}
} ตอนนี้รูปแบบการกำหนดค่าที่รองรับเพียงอย่างเดียวสำหรับ next.js ที่ปลั๊กอินนี้รองรับคือเวอร์ชัน CommonJS ของ config (เช่น next.config.js ) ส่วนใหญ่เป็นเพราะฉันไม่ได้คิดว่าจะต้องใช้ไฟล์ .mjs จาก Addon Storybook (ซึ่งผูกพันกับโมดูล 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 ภาพนำเข้าเพียงนำเข้าเส้นทางดิบไปยังภาพ (เช่น 'static/media/stories/assets/plugin.svg' ) เมื่อใช้ Image Image storybook-addon-next จะทำงาน "next.js way" ซึ่งหมายความว่าตอนนี้เราได้รับวัตถุเมื่อเรานำเข้าภาพ ตัวอย่างเช่น:
{
"src" : " static/media/stories/assets/plugin.svg " ,
"height" : 48 ,
"width" : 48 ,
"blurDataURL" : " static/media/stories/assets/plugin.svg "
}ดังนั้นหากบางสิ่งในนิทานไม่แสดงภาพอย่างถูกต้องตรวจสอบให้แน่ใจว่าคุณคาดหวังว่าวัตถุจะถูกส่งคืนจากการนำเข้าแทนเส้นทางสินทรัพย์
ดูภาพท้องถิ่นสำหรับรายละเอียดเพิ่มเติมเกี่ยวกับวิธี Next.js ปฏิบัติต่อการนำเข้าภาพคงที่
ตอนนี้ใช้ next.config.mjs ไม่ได้รับการสนับสนุนโดย addon นี้ ดู next.config.js สำหรับรายละเอียดเพิ่มเติม ตอนนี้จำเป็นต้องใช้ส่วนขยาย .js แทน อย่าลังเลที่จะช่วยในการสนทนานี้เพื่อรับการสนับสนุนนี้
คุณอาจได้รับสิ่งนี้หากคุณใช้เส้นด้าย V2 หรือ V3 ดูหมายเหตุสำหรับผู้ใช้ Yarn V2 และ V3 สำหรับรายละเอียดเพิ่มเติม
ฉันเปิดรับการสนทนา อย่าลังเลที่จะเปิดปัญหา
เอกสารนี้ไม่เพียงพอสำหรับคุณหรือไม่?
มันสับสนหรือไม่?
มัน ... ฉันกล้าพูดว่า ... ไม่ถูกต้อง?
หากสิ่งใด ๆ ข้างต้นอธิบายถึงความรู้สึกของคุณเกี่ยวกับเอกสารนี้ อย่าลังเลที่จะเปิดปัญหา
