nextjs server

Libro de cuentos NextJS Server

Storybook NextJS Server es un marco altamente experimental para construir componentes React de forma aislada. A diferencia del establo @storybook/nextjs , está integrado dentro de su aplicación NextJS y es reproducida por NextJS.

Esto tiene algunos beneficios clave:

1. Solo necesita iniciar un servidor cuando está desarrollando su aplicación.
2. Es "ligero" ya que su aplicación está haciendo la mayor parte del trabajo pesado
3. Sus componentes se renderizan de manera idéntica a cómo se renderizan en su aplicación
4. Puede usarlo para desarrollar componentes del servidor React

• Instalar
• Comenzar
• Desarrollar
  • Directorio de páginas
  • Directorio de aplicaciones
• Personalizar

Instalar

Para instalar, ejecute lo siguiente en un proyecto NextJS existente:

npm create nextjs-storybook

Luego, actualice su next.config.js para usar el decorador withStorybook .

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

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

Comenzar

El instalador agrega historias de muestra al directorio /src/stories o /stories . Para ver su libro de cuentos, simplemente ejecute su servidor de desarrollo NextJS:

npm run dev

Su aplicación debe mostrarse como normal, pero debe obtener una nueva ruta, /storybook que muestre sus historias.

Puede fallar si su servidor de desarrollo NextJS no se ejecuta en el puerto predeterminado, que es 3000 o la variable de entorno de $PORT si está configurado. Si el puerto especificado ya está tomado, NEXTJS se incrementará automáticamente para encontrar un puerto gratuito y esto arruina el libro de cuentos en la configuración actual. Puede personalizar su configuración para diferentes puertos, rutas, etc. según sea necesario.

Desarrollar

El desarrollo en el libro de cuentos está documentado en los documentos oficiales, pero hay algunos matices a tener en cuenta en el libro de cuentos NextJs Server. El comportamiento es diferente dependiendo de si se está ejecutando en la configuración pages de NextJS (antiguo) o el directorio app .

Si su aplicación se ejecuta en el directorio pages , las historias de los libros de cuentos se implementan como componentes del cliente React y deben comportarse de manera muy similar al libro de cuentos estable para NextJS.

Si su aplicación se está ejecutando en el directorio app , las historias de Storybook se ejecutan como componentes del servidor React (RSC), están sujetas a varias restricciones RSC.

Directorio de páginas

Reparar

Directorio de aplicaciones

Reparar

Personalizar

La función withStorybook acepta varias opciones de configuración, todas las cuales son opcionales:

Opción	Descripción	Por defecto
puerto	Port que se ejecutará la aplicación Next.js.	process.env.port ?? 3000
sbport	Puerto interno de ese libro de cuentos se ejecutará.	34567
gerente	URL Path a la interfaz de usuario "Gerente" de Storybook.	'Storybook'
vista previa	Ruta de la URL a la historia previa de la historia de Storybook iframe.	'Previsión de libros de cuentos'
config	Directorio donde están los archivos de configuración del libro de cuentos.	'.Storybook'
appdir	Si usar el directorio de aplicaciones NextJS.	indefinido