nextjs server
1.0.0
Storybook NextJS Server เป็นกรอบ การทดลองสูง ในการสร้างส่วนประกอบที่เกิดขึ้นในการแยก ซึ่งแตกต่างจาก @storybook/nextjs ที่เสถียรมันถูกฝัง อยู่ใน แอพ NextJS ของคุณและแสดงผลโดย NextJS
สิ่งนี้มีประโยชน์สำคัญเล็กน้อย:
ในการติดตั้งให้เรียกใช้สิ่งต่อไปนี้ในโครงการ NextJS ที่มีอยู่:
npm create nextjs-storybook จากนั้นอัปเดต next.config.js ของคุณเพื่อใช้ withStorybook Decorator
+ 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 จะเพิ่มขึ้นอัตโนมัติเพื่อค้นหาพอร์ตฟรีและนิทานที่ยุ่งเหยิงในการกำหนดค่าปัจจุบัน คุณสามารถปรับแต่งการตั้งค่าของคุณสำหรับพอร์ตเส้นทางที่แตกต่างกัน ฯลฯ ตามต้องการ
การพัฒนาในนิทานมีการบันทึกไว้ในเอกสารอย่างเป็นทางการ แต่มีความแตกต่างบางอย่างที่ต้องระวังในเซิร์ฟเวอร์นิทาน NextJS พฤติกรรมนั้นแตกต่างกันไปขึ้นอยู่กับว่าคุณกำลังทำงานในการตั้งค่า pages ของ NextJS (เก่า) หรือไดเรกทอรี app
หากแอปของคุณทำงานในไดเรกทอรี pages เรื่องราวเรื่องราวจะถูกนำไปใช้เป็นส่วนประกอบของไคลเอนต์รีทรีและควรทำตัวคล้ายกับหนังสือนิทานที่มั่นคงสำหรับ NextJS
หากแอปของคุณทำงานในไดเรกทอรี app เรื่องราวของ Storybook กำลังทำงานเป็นส่วนประกอบของ React Server (RSC) จึงอยู่ภายใต้ข้อ จำกัด RSC ต่างๆ
fixme
fixme
ฟังก์ชั่น withStorybook ยอมรับตัวเลือกการกำหนดค่าหลายตัวซึ่งทั้งหมดเป็นทางเลือก:
| ตัวเลือก | คำอธิบาย | ค่าเริ่มต้น |
|---|---|---|
| ท่าเรือ | พอร์ตที่แอปถัดไป JS จะทำงาน | process.env.port ?? 3,000 |
| sbport | พอร์ตภายในหนังสือนิทานที่จะดำเนินการต่อไป | 34567 |
| ผู้จัดการ | เส้นทาง URL ไปยัง "ผู้จัดการ" ของ Storybook | 'นิทาน' |
| PrehivePath | PATH URL ไปยัง Preview เรื่องราวของ Storybook Iframe | 'Storybook-Preview' |
| configdir | ไดเรกทอรีที่ไฟล์กำหนดค่าของ Storybook อยู่ | '.storybook' |
| appdir | ไม่ว่าจะใช้ไดเรกทอรีแอป NextJS หรือไม่ | ไม่ได้กำหนด |
