Storybook هو أداة قوية لبناء مكونات واجهة المستخدم بمعزل عن غيرها. يساعدك على إنشاء واختبار المكونات دون تشغيل التطبيق بأكمله.

إذا سبق لك استخدام Storybook مع Next.js ، فستلاحظ أنك بحاجة إلى تكوينه للتعامل مع CSS والصور بشكل صحيح. قد تكون العملية محبطة ولكن هذه الخطوات البسيطة ستساعد في قيادة الطريق.

ابدأ بإعداد مشروع Next.js

إذا لم يكن لديك بالفعل مشروع Next.js ، فاتبع المسؤول Next.js دليل البدء لإنشاء مشروع جديد.

تهيئة Storybook

قم بتشغيل الأمر التالي في الجهاز لتهيئة Storybook.

npx sb init - webpack الباني 5

يكتشف هذا الأمر المشروع الذي تعمل عليه ، ويقوم بتثبيت جميع الحزم اللازمة ، وإنشاء نماذج قصصية.

قم بإعداد CSS

أول شيء عليك القيام به هو تضمين ملف CSS العام في preview.js.

قم بإعداد الأنماط العالمية

يتم تطبيق الأنماط العامة عبر التطبيق بأكمله. لتطبيق هذه الأنماط في المجموعات النصية ، يمكنك استيراد الملف إلى مجموعات نصية فردية وهذا سيعمل. ومع ذلك ، قد ينتهي بك الأمر إلى إعادة كتابة بيان الاستيراد عبر العديد من القصص أو حتى نسيانها.

الحل الأفضل هو استيراد الأنماط العامة بتنسيق.القصص القصيرة / Preview.js ملف ، وهو ملف يحتوي على جميع التكوينات المشتركة لـ Storybook.

instagram viewer

في الجزء العلوي من .storybook / preview.js ، قم بتضمين بيان الاستيراد التالي.

يستورد "../styles/globals.css";

قم بإعداد Sass لـ Storybook في Next.js

بشكل افتراضي ، لا يأتي Storybook مع دعم خارج الصندوق لـ لغة تمديد ساس. تحتاج إلى توسيع تكوين حزمة الويب عن طريق تثبيت محمل النمط ، ومحمل css ، ومحمل sass.

npm i-style-loader css-loader sass-loader

إليك ما تفعله هذه الحزم:

  • يضخ محمل النمط CSS في DOM.
  • يفسر css-loader @ import و URL () مثل الاستيراد / الطلب ويحلها.
  • تحميل sass-loader SCSS إلى CSS.

لتكوين هذه الحزم ، أضف الكود التالي في .storybook / main.js:

مقدار ثابت المسار = يتطلب('طريق')؛
وحدة.exports = {
// التكوينات الأخرى
 حزمة الويب غير متزامن (التكوين) => {
 config.module.rules.push (
 {
 امتحان: /\\.s(a|c)ss$/,
 تشمل: path.resolve (__dirname، '../') ،
 يستخدم: [
 "محمل النمط"،
 {
 محمل: 'css-loader' ،
 خيارات: {
 الوحدات: {
 آلي: حقيقي,
 localIdentName: '[الاسم] __ [محلي] - [التجزئة: base64:5]',
 },
 },
 },
 'sass-loader'
 ],
 },
 );
يعود التكوين ؛
 }
}

بعد ذلك ، يجب أن يكون Sass متاحًا في Storybook.

تطبيق الدعامة غير المحسَّنة على صور Next.js

يحتوي Next.js على العديد من ميزات التحسين. أحدها هو تحسين الصورة من خلال مكون الصورة الذي يجعل تحميل الصور أسرع والتكيف مع الشاشة. ومع ذلك ، من الصعب العمل في Storybook لأن Storybook يعمل بمعزل عن بيئة Next.js. من الأفضل إلغاء تحسين الصور في القصص.

للبدء ، تحتاج إلى خدمة الدليل العام في Storybook للإشارة إلى مكان الصور. يمكنك أن تفعل ذلك في البرامج النصية npm الخريطة في package.json ملف أو في .storybook / main.js.

في package.json، قم بتحديث نصوص Storybook لخدمة الدليل العام.

"نصوص": {
"قصة": "start-storybook -p 6006 -s ./public",
"بناء قصة": "بناء-كتاب القصص-العامة"
}

بدلا من ذلك ، تعديل ./storybook/main.js لتضمين الدليل الثابت الذي ، في هذه الحالة ، هو المجلد العام.

وحدة.صادرات = {
// التكوينات الأخرى
"ساكنة": [ "../عام" ],
}

بعد تقديم الدليل العام ، قم بتطبيق الخاصية غير المحسَّنة على صور Next.js المستخدمة في القصص.

في .storybook / main.js ، أضف الكود التالي:

يستورد * مثل الصورة التالية من "التالي / الصورة" ؛
مقدار ثابت OriginalNextImage = NextImage.تقصير;
هدف.defineProperty (NextImage، "تقصير", {
 شكلي: حقيقي,
 القيمة: (الدعائم) => (
<OriginalNextImage
 {... الدعائم}
 غير محسن
 />
 ),
});

يستخدم هذا الرمز الخاصية غير المحسَّنة في أي مكان يتم فيه استخدام مكون الصورة.

استخدام Storybook في Next.js

Storybook هي واحدة من تلك الأدوات التي تعتقد أنها مملة للغاية لاستخدامها ولكن بمجرد أن تبدأ في استخدامها ، فإنك تدرك ما كنت تفتقده. باستخدام Storybook ، يمكنك إنشاء مكونات مختلفة واختبارها دون تشغيل التطبيق بالكامل. لذلك ، فهو يجعل مكونات البناء من الألف إلى الياء بسيطة.

إذا كنت تستخدم Next.js ، فتأكد من تكوين CSS وإلغاء تحسين الصور قبل البدء.