الصفحة الرئيسية>المتعلقة بالبرمجة>مكونات الطرف الثالث
تنزيل

Storybook NextJS Server

Storybook NextJS Server هو إطار تجريبي للغاية لإنشاء مكونات React بمعزل عن غيرها. على عكس @Stable @storybook/nextjs ، يتم تضمينه داخل تطبيق NextJS الخاص بك ويتم تقديمه بواسطة NextJs.

هذا له بعض الفوائد الرئيسية:

  1. تحتاج فقط إلى بدء تشغيل خادم واحد عند تطوير تطبيقك
  2. إنه "خفيف الوزن" لأن تطبيقك يقوم بمعظم الرفع الثقيل
  3. تعرض مكوناتك بشكل متماثل كيفية عرضها في تطبيقك
  4. يمكنك استخدامه لتطوير مكونات خادم React
  • ثَبَّتَ
  • يبدأ
  • يطور
    • دليل الصفحات
    • دليل التطبيق
  • تخصيص

ثَبَّتَ

للتثبيت ، قم بتشغيل ما يلي في مشروع NEXTJS الحالي: 

npm create nextjs-storybook

ثم قم بتحديث next.config.js لاستخدام Decorator withStorybook . 

 + 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 . لعرض كتاب القصص الخاص بك ، ما عليك سوى تشغيل خادم Dev التالي: 

npm run dev

يجب أن يعرض تطبيقك بشكل طبيعي ، ولكن يجب أن يحصل على مسار جديد ، /storybook ، يعرض قصصك.

يمكن أن يفشل إذا لم يتم تشغيل خادم Dev التالي على المنفذ الافتراضي ، وهو 3000 أو متغير بيئة $PORT إذا تم تعيينه. إذا تم أخذ المنفذ المحدد بالفعل ، فسيقوم NextJs بتركيب تلقائي للعثور على منفذ مجاني وهذا يفسد قصة القصص في التكوين الحالي. يمكنك تخصيص الإعداد الخاص بك لمنافذ مختلفة ، والطرق ، وما إلى ذلك حسب الحاجة.

يطور

تم توثيق التطوير في Storybook في المستندات الرسمية ، ولكن هناك بعض الفروق الدقيقة التي يجب أن تكون على دراية بها في Storybook NextJS Server. يختلف السلوك اعتمادًا على ما إذا كنت تعمل في إعداد pages NextJS (Old) أو app Directory.

إذا كان تطبيقك يعمل في دليل pages ، فسيتم تنفيذ قصص القصص القصيرة كمكونات عميل React ويجب أن تتصرف بشكل مشابه تمامًا لقصص القصص المستقر لـ NextJs.

إذا كان تطبيقك يعمل في دليل app ، فإن قصص Storybook تعمل كمكونات خادم React (RSC) ، لذلك تخضع لقيود RSC المختلفة.

دليل الصفحات

FixMe

دليل التطبيق

FixMe

تخصيص

تقبل وظيفة withStorybook العديد من خيارات التكوين ، وكلها اختيارية:

خيار وصف تقصير
ميناء المنفذ الذي سيتم تشغيل تطبيق Next.js. Process.env.port ؟؟ 3000
sbport المنفذ الداخلي الذي سيتم تشغيله على هذا الكتاب. 34567
ManagerPath URL PATH إلى "مدير" UI's UI. "قصص"
المعاينة URL Path to Storybook Story Preview Iframe. 'قصص preview' '
configdir دليل حيث توجد ملفات تكوين Storybook. '.storybook'
appdir ما إذا كان لاستخدام دليل تطبيق NextJS. غير محدد
يوسع
معلومات إضافية
تطبيقات ذات صلة
نوصي لك
أخبار ذات صلة الكل