nextjs server

SERVICE NEXTJS Book NextJS

Le serveur NEXTJS Storybook est un cadre hautement expérimental pour construire des composants React isolément. Contrairement à la stable @storybook/nextjs , il est intégré dans votre application NextJS et rendu par NextJS.

Cela a quelques avantages clés:

1. Il vous suffit de démarrer un seul serveur lorsque vous développez votre application
2. Il est «léger» puisque votre application fait la plupart du travail lourd
3. Vos composants rendent identique à la façon dont ils rendent dans votre application
4. Vous pouvez l'utiliser pour développer des composants React Server

• Installer
• Commencer
• Développer
  • Répertoire des pages
  • Répertoire de l'application
• Personnaliser

Installer

Pour installer, exécutez ce qui suit dans un projet NextJS existant:

npm create nextjs-storybook

Ensuite, mettez à jour votre next.config.js pour utiliser le décorateur withStorybook .

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

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

Commencer

Le programme d'installation ajoute des exemples d'histoires au répertoire /src/stories ou /stories . Pour afficher votre livre de contes, exécutez simplement votre serveur de développement NextJS:

npm run dev

Votre application doit s'afficher comme d'habitude, mais il devrait obtenir un nouveau parcours, /storybook , qui affiche vos histoires.

Il peut échouer si votre serveur Dev NextJS n'exécute pas sur le port par défaut, qui est 3000 ou la variable d'environnement de $PORT si elle est définie. Si le port spécifié est déjà pris, NextJS sera automatiquement ingéré pour trouver un port libre et cela gâche le livre de contes dans la configuration actuelle. Vous pouvez personnaliser votre configuration pour différents ports, itinéraires, etc. selon les besoins.

Développer

Le développement dans le livre de contes est documenté dans les documents officiels, mais il y a quelques nuances à connaître dans le serveur NEXTJS de Storybook. Le comportement est différent selon que vous exécutez dans la configuration pages de NextJS (Old) ou le répertoire app .

Si votre application s'exécute dans le répertoire pages , les histoires de contes sont implémentées en tant que composantes du client React et devraient se comporter de manière très similaire au livre de contes stable pour NextJS.

Si votre application s'exécute dans le répertoire app , les histoires de StoryBook s'exécutent en tant que composants React Server (RSC), sont donc soumis à diverses contraintes RSC.

Répertoire des pages

Fixe

Répertoire de l'application

Fixe

Personnaliser

La fonction withStorybook accepte plusieurs options de configuration, toutes facultatives:

Option	Description	Défaut
port	Port sur lequel l'application Next.js fonctionnera.	process.env.port ?? 3000
sbport	Port interne sur lequel le livre de contes fonctionnera.	34567
managerpath	Path URL vers l'interface utilisateur "Manager" de StoryBook.	«livre de contes»
prévisualisation	Path d'URL vers l'histoire de StoryBook Aperçu iframe.	'Storybook-Preview'
configdir	Répertoire où se trouvent les fichiers de configuration de Storybook.	'.Storybook'
appdir	Que ce soit pour utiliser le répertoire de l'application NextJS.	indéfini