nextjs server

스토리 북 Nextjs 서버

Storybook Nextjs Server는 반응 구성 요소를 분리하는 매우 실험적인 프레임 워크입니다. stable @storybook/nextjs 와 달리 NextJS 앱 내부에 포함되어 다음 JS에 의해 렌더링됩니다.

여기에는 몇 가지 주요 이점이 있습니다.

1. 앱을 개발할 때만 하나의 서버를 시작하면됩니다.
2. 앱이 대부분의 무거운 리프팅을 수행하기 때문에 "가벼운"것입니다.
3. 구성 요소는 앱에서 렌더링하는 방식과 동일하게 렌더링됩니다.
4. React Server 구성 요소를 개발하는 데 사용할 수 있습니다

• 설치하다
• 시작
• 개발하다
  • 페이지 디렉토리
  • 앱 디렉토리
• 사용자 정의하십시오

설치하다

설치하려면 기존 Nextjs 프로젝트에서 다음을 실행하십시오.

npm create nextjs-storybook

그런 다음 withStorybook 데코레이터를 사용하려면 next.config.js 를 업데이트하십시오.

 + const withStorybook = require('@storybook/nextjs-server/next-config')(/* sb config */);

/** @type {import('next').NextConfig} */
- module.exports = {/* nextjs config */}
+ module.exports = withStorybook({/* nextjs config */}); 

시작

설치 프로그램은 /src/stories 또는 /stories 디렉토리에 샘플 스토리를 추가합니다. 스토리 북을 보려면 Nextjs Dev 서버를 실행하시기 바랍니다.

npm run dev

앱은 정상적으로 표시되어야하지만 스토리를 표시하는 새로운 경로, /storybook 있어야합니다.

NextJS Dev 서버가 기본 포트에서 실행되지 않으면 3000 또는 $PORT 환경 변수가 설정되어 있지 않으면 실패 할 수 있습니다. 지정된 포트가 이미 채취 된 경우 NextJS는 무료 포트를 찾기 위해 자동 점수를 제공하며 현재 구성에서 스토리 북이 엉망이됩니다. 필요에 따라 다른 포트, 경로 등에 대한 설정을 사용자 정의 할 수 있습니다.

개발하다

Storybook에서 개발은 공식 문서에 문서화되어 있지만 Storybook Nextjs Server에는 몇 가지 뉘앙스가 있습니다. NextJS의 pages 설정 (OLD) 또는 app 디렉토리에서 실행 중인지 여부에 따라 동작이 다릅니다.

앱이 pages 디렉토리에서 실행중인 경우 스토리 북 스토리는 React 클라이언트 구성 요소로 구현되며 NextJS의 안정적인 스토리 북과 매우 유사하게 작동해야합니다.

앱이 app 디렉토리에서 실행중인 경우 StoryBook의 스토리는 RSC (React Server 구성 요소)로 실행 중이므로 다양한 RSC 제약 조건이 적용됩니다.

페이지 디렉토리

Fixme

앱 디렉토리

Fixme

사용자 정의하십시오

withStorybook 함수는 여러 구성 옵션을 수용합니다. 모두 선택 사항입니다.

옵션	설명	기본
포트	다음에 JS 앱이 실행되는 포트.	Process.env.port ?? 3000
sbport	스토리 북 내부 포트가 실행됩니다.	34567
관리자	Storybook의 "Manager"UI 로의 URL 경로.	'스토리 북'
미리보기	Storybook의 Story Preview Iframe에 대한 URL 경로.	'스토리 북 예약'
configdir	StoryBook의 구성 파일이있는 디렉토리.	'.Storybook'
appdir	NextJS 앱 디렉토리 사용 여부	한정되지 않은