storybook addon next
v1.8.0
이 애드온은 @Storybook/Nextjs에 찬성하여 스토리 북에서 다음.js 기능을 지원하기위한 스토리 북 공식 애드온입니다. 그것은 storybook-addon-next 가하는 모든 것을 지원합니다! 나는 심지어 그들과 함께 이것을 개발하기 위해 노력했기 때문에 당신은 좋은 손에 있어야합니다.
마이그레이션 방법에 대한 자세한 내용은 마이그레이션 문서에 문의하십시오.
? JS : Webpack Config 작성 및 디버깅에 지친 구성 지원이 없습니까 ? 다음 .js가 상자에서 지원하는 것,이 애드온은 Storybook에서 가능합니다.
다음 .js의 이미지 구성 요소 (부분 지원)
다음 .js 라우팅
SASS/SCSS
CSS/SASS/SCSS 모듈
스타일 JSX
Postcss
절대 수입
런타임 구성
사용자 정의 웹 팩 구성
TypeScript
next.config.mjs 파일은 .js 확장자 .mjs next.config.js예제를 실행하려면 먼저이 repo의 루트에서
yarn build실행하여 Addon을 빌드하십시오.
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 의 절대 경로 다음/이미지는 스토리 북으로 작업하는 것이 어렵습니다. 이 Addon은 구성없이 Next.js의 Image 구성 요소를 사용할 수 있습니다!
이미지 구성 요소에는 이미지 최적화와 같은 기능이 있으며 Framework에서 다음.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는 자동으로 최적화되지 않습니다.
자리 표시 자 = "블러"가 사용되는 경우 사용 된 Blurdataurl은 이미지의 SRC입니다 (따라서 자리 표시자를 효과적으로 비활성화 함).
Storybook에 대한 다음 Next.js Image S가 처리되는 방법에 대한 자세한 내용은이 문제를 참조하십시오.
이 형식은 아직이 애드온에서 지원되지 않습니다. 이것이 당신이보고 싶은 것이라면 문제를 자유롭게 열어주십시오.
이 솔루션은 Storybook-Addon-Next-Router를 기반으로 하므로이 애드온이 작동 할 수있는 좋은 솔루션을 제공 한 lifeiscontent 덕분에 큰 감사를드립니다.
다음 .js의 라우터는 자동으로 스터브되어 라우터가 상호 작용할 때 모든 상호 작용이 Adction Addon이 있으면 스토리 북 액션 탭에 자동 으로그인됩니다.
스토리 매개 변수에 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 : { }
}
}참조는이 예제를 참조하십시오.
고정 라우터의 기본값은 다음과 같습니다 (글로벌 작동 방식에 대한 자세한 내용은 글로벌 참조)
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 구성이 자동으로 포함됩니다.
지금은 다음.js 구성의
.js확장 만.mjs가 아니라 지원됩니다. 자세한 내용은 다음.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 >
)
}JS Solution의 CSS 내장 CSS는 Styled-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자신의 바벨 구성도 사용할 수 있습니다. 이것은 Styled-JSX를 사용자 정의하는 방법의 예입니다.
// .babelrc or whatever config file you use
{
"presets" : [
[
" next/babel " ,
{
"styled-jsx" : {
"plugins" : [ " @styled-jsx/plugin-sass " ]
}
}
]
]
}Monorepo를 사용하는 경우 Babel 구성을 스토리 북 프로젝트에 직접 추가해야 할 수도 있습니다. 시작할 내용이있는 스토리 북 프로젝트에 Babel 구성을 추가하십시오.
{
"presets" : [ " next/babel " ]
}다음.js를 사용하면 PostCSS 구성을 사용자 정의 할 수 있습니다. 따라서이 애드온은 귀하를 위해 PostCSS 구성을 자동으로 처리합니다.
이것은 Zero Config Tailwindcss와 같은 멋진 것들을 허용합니다! 참조는 with-tailwindcss 예제를 참조하십시오! 다음 Next.js의 Tailwindcss 예제의 클론은 Storybook 과이 추가 기능으로 설정되었습니다.
안녕히 가세요 ../ ! 루트 디렉토리의 절대 가져 오기는이 애드온에서 잘 작동합니다.
// 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'
// ... 다음.js를 사용하면 런타임 구성을 허용하여 런타임에 getConfig 함수를 가져 오려면 런타임에 next.config.js 파일에 특정 구성을 정의 할 수 있습니다.
이 애드온의 스토리 북의 맥락에서 다음 .js의 런타임 구성 기능이 잘 작동 할 것으로 예상 할 수 있습니다.
StoryBook은 서버가 구성 요소를 렌더링하지 않기 때문에 구성 요소는 클라이언트 측에서 일반적으로 보는 것만 볼 수 있습니다 (즉, serverRuntimeConfig 표시되지 않지만 publicRuntimeConfig 볼 수 있습니다).
예를 들어 다음 다음 다음에 JS 구성을 고려하십시오.
// 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와 같은 상자에서 무료로 제공되지만 때로는 다음에 사용자 정의 웹 팩 구성 수정을 추가합니다. 이 애드온은 추가하려는 대부분의 웹 팩 수정을 처리합니다. 다음 .js가 상자 밖에서 기능을 지원하면이 애드온으로 인해 해당 기능이 스토리 북의 상자에서 작동하게됩니다. 다음.js가 상자에서 무언가를 지원하지 않지만 구성하기 쉽게 만들면이 애드온은 스토리 북에 대해서도 동일하게 수행됩니다. 이 애드온을 추가 한 후 Storybook에서 작동하기 위해 다음.js 기능을 얻기 위해 Webpack을 구성해야 할 내용을 찾으면 버그가 될 수 있으며 자유롭게 문제를 열 수 있습니다.
StoryBook의 문서에 따라 .storybook/main.js로 작성 해야하는 모든 웹 팩 수정은.
참고 : 모든 웹 팩 수정이 next.config.js 와 .storybook/main.js 사이에 복사/붙여 넣을 수있는 것은 아닙니다. StoryBook의 Webpack Config로 올바르게 수정하는 방법과 Webpack 작동 방식에 대한 재확인을 수행하는 것이 좋습니다.
커뮤니티를 돕기위한 예를 자유롭게 제공하십시오.
아래는이 애드온으로 스토리 북에 svgr 지원을 추가하는 방법의 예입니다. 전체 예는 여기에서 찾을 수 있습니다.
// .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 구성을 처리하지만이 애드온은 Absolute Import 및 모듈 경로 별명에 대한 Next.js의 지원에 대한 추가 지원을 추가합니다. 요컨대, 그것은 당신의 tsconfig.json 의 baseurl과 경로를 고려합니다. 따라서 아래의 tsconfig.json 은 상자에서 작동합니다.
{
"compilerOptions" : {
"baseUrl" : " . " ,
"paths" : {
"@/components/*" : [ " components/* " ]
}
}
} 이 플러그인이 지원하는 Next.js의 유일한 지원 된 구성 형식은 CommonJS 버전의 구성 (예 : next.config.js )입니다. 이것은 대부분 스토리 북 애드온에서 .mjs 파일을 요구하는 방법을 찾지 못했기 때문입니다 (지금은 내가 아는 한 CommonJS 모듈에 바인딩됩니다). 당신이 도울 수 있다면, 그러한 지원이 가능한 경우 .mjs 버전을 지원하기 위해이 토론에 기여할 수 있다면 그것을 좋아합니다.
Yarn V2 또는 V3를 사용하는 경우 StoryBook이 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' ). storybook-addon-next 이미지 가져 오기를 사용하면 "Next.js Way"가 작동하여 이제 이미지를 가져올 때 객체를 얻습니다. 예를 들어:
{
"src" : " static/media/stories/assets/plugin.svg " ,
"height" : 48 ,
"width" : 48 ,
"blurDataURL" : " static/media/stories/assets/plugin.svg "
}따라서 StoryBook의 무언가가 이미지를 올바르게 표시하지 않으면 자산 경로 대신 가져 오기에서 객체를 반환 할 것으로 예상하십시오.
JS가 정적 이미지 가져 오기를 취급하는 방법에 대한 자세한 내용은 로컬 이미지를 참조하십시오.
지금은 다음 addon에서 next.config.mjs 사용하는 것이 지원되지 않습니다. 자세한 내용은 다음.config.js를 참조하십시오. 현재 .js 확장자를 대신 사용해야합니다. 이 토론을 지원 하여이 지원을 받으십시오.
원사 v2 또는 v3을 사용하는 경우이 점을 얻을 수 있습니다. 자세한 내용은 Yarn V2 및 V3 사용자의 메모를 참조하십시오.
나는 토론에 열려있다. 자유롭게 문제를여십시오.
이 문서가 당신에게 불충분 했습니까?
혼란 스럽습니까?
그게 ... 감히 말해서 ... 부정확 한가?
위의 어떤 것이이 문서의 감정을 설명하는 경우. 자유롭게 문제를여십시오.
