Storybook — это мощный инструмент для изолированного создания компонентов пользовательского интерфейса. Это помогает создавать и тестировать компоненты, не запуская все приложение.

Если вы когда-либо использовали Storybook с Next.js, вы заметите, что вам нужно настроить его для правильной обработки CSS и изображений. Процесс может быть разочаровывающим, но эти простые шаги помогут проложить путь.

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

Если у вас еще нет настроенного проекта Next.js, следуйте официальному Next.js Руководство по началу работы для создания нового проекта.

Инициализировать сборник рассказов

Выполните следующую команду в терминале, чтобы инициализировать Storybook.

инициализация npx sb --строитель веб-пакет5

Эта команда определяет проект, над которым вы работаете, устанавливает все необходимые пакеты и создает примеры историй.

Настройка CSS

Первое, что вам нужно сделать, это включить глобальный файл CSS в файл preview.js.

Настройка глобальных стилей

Глобальные стили применяются во всем приложении. Чтобы применить эти стили в историях, вы можете импортировать файл в отдельные истории, и это сработает. Однако вы в конечном итоге перепишете оператор импорта во многих историях или даже забудете об этом.

instagram viewer

Лучшее решение — импортировать глобальные стили в файл .сборник рассказов/preview.js файл, файл, который содержит все общие конфигурации для Storybook.

В верхней части файла .storybook/preview.js включите следующий оператор импорта.

Импортировать "../стили/globals.css";

Настройте Sass для сборника рассказов в Next.js

По умолчанию Storybook не поставляется с готовой поддержкой Язык расширения Sass. Вам необходимо расширить конфигурацию веб-пакета, установив style-loader, css-loader и sass-loader.

npm i -D стиль-загрузчик css-загрузчик sass-загрузчик

Вот что делают эти пакеты:

  • style-loader внедряет CSS в DOM.
  • css-loader интерпретирует @import и URL() как import/require и разрешает их.
  • sass-loader загружает SCSS в CSS.

Чтобы настроить эти пакеты, добавьте следующий код в .storybook/main.js:

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

После этого Sass должен быть доступен в Storybook.

Примените неоптимизированную опору к изображениям Next.js

Next.js имеет множество функций оптимизации. Одним из них является оптимизация изображения с помощью компонента изображения, который ускоряет загрузку изображений и их адаптацию к экрану. Однако работать с Storybook сложно, поскольку Storybook работает изолированно от среды Next.js. Изображения в историях лучше деоптимизировать.

Для начала вам нужно обслуживать общедоступный каталог в Storybook, чтобы указать, где находятся изображения. Вы можете сделать это в npm-скрипты карта в пакет.json файл или в .рассказ/main.js.

В пакет.json, обновите сценарии сборника рассказов, чтобы они обслуживали общедоступный каталог.

"сценарии": {
"сборник рассказов": "начальный сборник рассказов -p 6006 -s ./public",
"Сборник рассказов": "build-рассказы -s public"
}

В качестве альтернативы, изменить ./сборник рассказов/main.js чтобы включить статический каталог, который в данном случае является общей папкой.

модуль.экспорт = {
// другие конфигурации
"статические каталоги": [ "../публичный" ],
}

После обслуживания общедоступного каталога примените неоптимизированную опору к изображениям Next.js, используемым в историях.

В .storybook/main.js добавьте следующий код:

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

Этот код использует неоптимизированную опору везде, где используется компонент изображения.

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

Сборник рассказов — один из тех инструментов, которые, по вашему мнению, слишком утомительны для использования, но как только вы начнете их использовать, вы поймете, чего вам не хватало. С помощью Storybook вы можете создавать и тестировать различные компоненты, не запуская приложение целиком. Таким образом, это упрощает сборку компонентов с нуля.

Если вы используете Next.js, перед началом работы убедитесь, что вы настроили CSS и деоптимизировали изображения.