Storybook е мощен инструмент за изграждане на UI компоненти в изолация. Помага ви да създавате и тествате компоненти, без да стартирате цялото приложение.

Ако някога сте използвали Storybook с Next.js, ще забележите, че трябва да го конфигурирате да обработва правилно CSS и изображения. Процесът може да бъде разочароващ, но тези прости стъпки ще ви помогнат да проправите пътя.

Започнете с настройка на проекта Next.js

Ако все още нямате настроен проект Next.js, следвайте официалния Next.js Ръководство за първи стъпки за създаване на нов проект.

Инициализиране на книга с разкази

Изпълнете следната команда в терминала, за да инициализирате Storybook.

npx sb инициал --builder webpack5

Тази команда открива проекта, върху който работите, инсталира всички необходими пакети и създава примерни истории.

Настройте CSS

Първото нещо, което трябва да направите, е да включите глобалния CSS файл в preview.js.

Настройте глобални стилове

Глобалните стилове се прилагат в цялото приложение. За да приложите тези стилове в истории, можете да импортирате файла в отделни истории и това ще работи. В крайна сметка обаче ще пренапишете оператора за импортиране в много истории или дори ще забравите.

instagram viewer

По-добро решение е да импортирате глобалните стилове в .книга с разкази/preview.js файл, файл, който съдържа всички споделени конфигурации за Storybook.

В горната част на .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:

конст път = изискват('път');
модул.exports = {
// други конфигурации
 webpackFinal: асинхронен (конфигурация) => {
 config.module.rules.push(
 {
 тест: /\\.s(a|c)ss$/,
 включват: path.resolve (__dirname, '../'),
 използвайте: [
 'style-loader',
 {
 loader: 'css-loader',
 настроики: {
 модули: {
 Автоматичен: вярно,
 localIdentName: '[име]__[локално]--[хеш: base64:5]',
 },
 },
 },
 "sass-loader"
 ],
 },
 );
връщане конфигурация;
 }
}

След това Sass трябва да е наличен в Storybook.

Приложете Unoptimized Prop към Next.js изображения

Next.js има много функции за оптимизация. Един от тях е оптимизирането на изображението чрез компонента за изображение, което кара изображенията да се зареждат по-бързо и да се адаптират към екрана. Въпреки това е трудно да се работи с Storybook, тъй като Storybook работи изолирано от средата Next.js. По-добре е да деоптимизирате изображенията в историите.

За да започнете, трябва да обслужите публичната директория в Storybook, за да посочите къде се намират изображенията. Можете да го направите в npm скриптове карта в package.json файл или в .storybook/main.js.

в package.json, актуализирайте скриптовете на Storybook, за да обслужват публичната директория.

"скриптове": {
"книга с разкази": "start-storybook -p 6006 -s ./public",
"build-storybook": "build-storybook -s public"
}

Алтернативно, променете ./storybook/main.js за включване на статичната директория, която в този случай е публичната папка.

модул.износ = {
// други конфигурации
"staticDirs": [ "../публично" ],
}

След като обслужвате публичната директория, приложете неоптимизираната подложка към изображенията Next.js, използвани в историите.

В .storybook/main.js добавете следния код:

импортиране * като NextImage от "следващ/изображение";
конст OriginalNextImage = Следващо изображение.по подразбиране;
Обект.defineProperty (Следващо изображение, "по подразбиране", {
 конфигурируеми: вярно,
 стойност: (реквизити) => (
<Оригинално следващо изображение
 {...реквизити}
 неоптимизиран
 />
 ),
});

Този код използва неоптимизирания проп навсякъде, където се използва компонентът на изображението.

Използване на Storybook в Next.js

Storybook е един от онези инструменти, които смятате, че са твърде досадни за използване, но след като започнете да ги използвате, разбирате какво сте пропускали. С Storybook можете да създавате и тествате различни компоненти, без да стартирате цялото си приложение. Следователно това прави строителните компоненти от самото начало прости.

Ако използвате Next.js, уверете се, че сте конфигурирали CSS и сте деоптимизирали изображенията, преди да започнете.