В этой статье мы рассмотрим различные методы настройки Storybook с Next.js — мощной комбинацией для создания компонентов пользовательского интерфейса и их демонстрации в изолированной среде разработки. Мы опишем пошаговые инструкции и предоставим примеры кода, которые помогут вам легко начать работу с Storybook и Next.js. Давайте погрузимся!

Метод 1. Ручная настройка

1. Создайте новый проект Next.js. Начните с настройки нового проекта Next.js с помощью команды npx create-next-app.
2. Установить Storybook: в корневом каталоге вашего проекта Next.js запустите npx sb init, чтобы установить Storybook и настроить необходимые конфигурации.
3. Настройка Storybook: настройте настройку Storybook, изменив файлы .storybook/main.jsи .storybook/preview.js. Вы можете добавлять дополнения, настраивать веб-пакет и многое другое.

Метод 2. Автоматическая настройка с помощью @storybook/next

1. Установите необходимые пакеты: запустите npm install -D @storybook/react @storybook/addon-actions @storybook/addon-links @storybook/addon-essentials @storybook/preset-next, чтобы установить необходимые пакеты Storybook.
2. Добавьте сценарии Storybook: в файл package.jsonдобавьте следующие сценарии:

   "scripts": {
    "storybook": "start-storybook -p 6006",
    "build-storybook": "build-storybook"
   }

3. Создайте файл конфигурации Storybook: создайте файл .storybook/main.jsв корневом каталоге вашего проекта и добавьте следующий код:

   module.exports = {
    addons: ['@storybook/addon-links', '@storybook/addon-essentials'],
   };

4. Создайте свою первую историю. В каталоге .storybookсоздайте файл YourComponent.stories.jsи определите истории вашего компонента с помощью Storybook API.

Метод 3: использование шаблона Next.js + Storybook

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

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

Не забудьте поэкспериментировать с различными настройками и изучить обширную документацию Storybook, чтобы полностью раскрыть его потенциал. Приятного кодирования!