Storybook הוא כלי רב עוצמה לבניית רכיבי ממשק משתמש בבידוד. זה עוזר לך ליצור ולבדוק רכיבים מבלי להפעיל את כל היישום.

אם אי פעם השתמשת ב-Storybook עם Next.js, תבחין שעליך להגדיר אותו כך שיטפל כראוי ב-CSS ובתמונות. התהליך יכול להיות מתסכל אך הצעדים הפשוטים הללו יעזרו להוביל את הדרך.

התחל בהגדרת פרויקט Next.js

אם עדיין אין לך פרויקט Next.js, עקוב אחר הרשמי Next.js מדריך תחילת העבודה ליצירת פרויקט חדש.

אתחול ספר סיפורים

הפעל את הפקודה הבאה בטרמינל כדי לאתחל את Storybook.

npx sb init --Builder webpack5

פקודה זו מזהה את הפרויקט עליו אתה עובד, מתקינה את כל החבילות הדרושות ויוצרת סיפורים לדוגמה.

הגדר CSS

הדבר הראשון שאתה צריך לעשות הוא לכלול את קובץ ה-CSS הגלובלי ב-preview.js.

הגדר סגנונות גלובליים

הסגנונות הגלובליים חלים על פני כל האפליקציה. כדי ליישם את הסגנונות האלה בסיפורים, אתה יכול לייבא את הקובץ לסיפורים בודדים וזה יעבוד. עם זאת, בסופו של דבר תכתוב מחדש את הצהרת הייבוא ​​על פני סיפורים רבים או אפילו תשכח.

פתרון טוב יותר הוא לייבא את הסגנונות הגלובליים ב-.ספר סיפורים/preview.js file, קובץ שמכיל את כל התצורות המשותפות עבור Storybook.

instagram viewer

בחלק העליון של ‎.storybook/preview.js, כלול את הצהרת הייבוא ​​הבאה.

יְבוּא "../styles/globals.css";

הגדר את Sass עבור Storybook ב-Next.js

כברירת מחדל, Storybook אינו מגיע עם תמיכה מהקופסה עבור שפת הרחבה של Sass. עליך להרחיב את תצורת ה-webpack על ידי התקנת style-loader, css-loader ו-sass-loader.

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

הנה מה שהחבילות האלה עושות:

  • style-loader מזריק CSS ל-DOM.
  • css-loader מפרש את @import ו-URL() כמו import/require ופותר אותם.
  • sass-loader טוען SCSS ל-CSS.

כדי להגדיר חבילות אלו, הוסף את הקוד הבא ב-.storybook/main.js:

const נתיב = לִדרוֹשׁ('נָתִיב');
מודול‎.exports = {
// תצורות אחרות
 webpackFinal: אסינכרון (config) => {
 config.module.rules.push(
 {
 מִבְחָן: /\\.s(a|c)ss$/,
 כולל: path.resolve (__dirname, '../'),
 להשתמש: [
 'מטעין בסגנון',
 {
 loader: 'css-loader',
 אפשרויות: {
 מודולים: {
 אוטומטי: נָכוֹן,
 localIdentName: '[name]__[local]--[hash: base64:5]',
 },
 },
 },
 'מטען מטומטם'
 ],
 },
 );
לַחֲזוֹר config;
 }
}

לאחר מכן, Sass אמור להיות זמין ב-Storybook.

החל את ה-Property Unoptimized על Next.js Images

ל-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 לכלול את הספרייה הסטטית שהיא, במקרה זה, התיקיה הציבורית.

מודול.יצוא = {
// תצורות אחרות
"staticDirs": [ "../פּוּמְבֵּי" ],
}

לאחר הגשת הספרייה הציבורית, החל את האביזר הלא מותאם על תמונות Next.js המשמשות בסיפורים.

ב-.storybook/main.js, הוסף את הקוד הבא:

יְבוּא * כפי ש NextImage מ "הבא/תמונה";
const OriginalNextImage = NextImage.בְּרִירַת מֶחדָל;
לְהִתְנַגֵד.defineProperty (NextImage, "בְּרִירַת מֶחדָל", {
 ניתן להגדרה: נָכוֹן,
 ערך: (אביזרים) => (
<OriginalNextImage
 {...אביזרים}
 לא מותאם
 />
 ),
});

קוד זה משתמש באביזר הלא אופטימלי בכל מקום שבו נעשה שימוש ברכיב התמונה.

שימוש ב-Storybook ב-Next.js

ספר סיפורים הוא אחד מהכלים האלה שאתה חושב שהם מייגעים מדי לשימוש, אבל ברגע שאתה מתחיל להשתמש בהם, אתה מבין מה היה חסר לך. עם Storybook, אתה יכול ליצור ולבדוק רכיבים שונים מבלי להפעיל את כל היישום שלך. לכן, זה הופך את רכיבי הבנייה מהיסוד לפשוטים.

אם אתה משתמש ב-Next.js, הקפד להגדיר את ה-CSS ולבטל אופטימיזציה של תמונות לפני שתתחיל.