nextjs server

Старший сборник NextJS Server

Soursbook NextJS Server - это очень экспериментальная структура для создания компонентов React в изоляции. В отличие от конюшни @storybook/nextjs , он встроен в ваше приложение NextJS и отображается NextJS.

Это имеет несколько ключевых преимуществ:

1. Вам нужно запустить один сервер только при разработке своего приложения
2. Это «легкий», так как ваше приложение делает большую часть тяжелой работы
3. Ваши компоненты отображаются идентично тому, как они рендеринг в вашем приложении
4. Вы можете использовать его для разработки компонентов сервера React

• Установить
• Начинать
• Развивать
  • Справочник страниц
  • Справочник приложений
• Настраивать

Установить

Для установки запустите следующее в существующем проекте NextJS:

npm create nextjs-storybook

Затем обновите свой next.config.js , чтобы использовать декоратор withStorybook .

 + const withStorybook = require('@storybook/nextjs-server/next-config')(/* sb config */);

/** @type {import('next').NextConfig} */
- module.exports = {/* nextjs config */}
+ module.exports = withStorybook({/* nextjs config */}); 

Начинать

Установщик добавляет примеры историй в каталог /src/stories или /stories . Чтобы просмотреть свой сборник рассказов, просто запустите свой сервер Dev NextJS:

npm run dev

Ваше приложение должно отображаться как обычно, но оно должно получить новый маршрут /storybook , который отображает ваши истории.

Он может выйти из строя, если ваш сервер Dev NextJS не работает в порте по умолчанию, который составляет 3000 или переменная среды $PORT если установлено. Если указанный порт уже взят, NextJS будет автоматической интеграцией, чтобы найти бесплатный порт, и этот сборник рассказов в текущей конфигурации. Вы можете настроить свою настройку для различных портов, маршрутов и т. Д. По мере необходимости.

Развивать

Разработка в сборнике рассказов задокументирована в официальных документах, но есть некоторые нюансы, о которых можно знать на сервере Storybook NextJS. Поведение отличается в зависимости от того, работаете ли вы в настройке pages NextJS (Old) или Directory app .

Если ваше приложение работает в каталоге pages , рассказы о сборниках рассказов реализованы как компоненты клиента React и должны вести себя очень аналогично стабильному сборнику рассказов для NextJS.

Если ваше приложение работает в каталоге app , истории Storybook работают как компоненты сервера React (RSC), поэтому подлежат различным ограничениям RSC.

Справочник страниц

Fixme

Справочник приложений

Fixme

Настраивать

Функция withStorybook принимает несколько вариантов конфигурации, все из которых являются необязательными:

Вариант	Описание	По умолчанию
порт	Порт, что приложение следующего.js будет работать.	Process.env.port ?? 3000
SBPORT	Внутренний порт, на котором будет запущено сборник рассказов.	34567
ManagerPath	URL PATH to Storybook «Менеджер» пользовательского интерфейса.	'Сказку'
PreviewPath	URL PATH to Storybook, предварительный просмотр iframe.	'Сканипь-Preview'
configdir	Справочник, где есть файлы конфигурации Storybook.	'.storybook'
appdir	Использовать ли каталог приложений NextJS.	неопределенный