Storybook es una poderosa herramienta para crear componentes de interfaz de usuario de forma aislada. Le ayuda a crear y probar componentes sin ejecutar toda la aplicación.
Si alguna vez usó Storybook con Next.js, notará que necesita configurarlo para manejar CSS e imágenes correctamente. El proceso puede ser frustrante, pero estos sencillos pasos le ayudarán a abrir el camino.
Comience por configurar el proyecto Next.js
Si aún no tiene un proyecto Next.js configurado, siga el oficial Siguiente.js Guía de inicio para crear un nuevo proyecto.
Inicializar libro de cuentos
Ejecute el siguiente comando en la terminal para inicializar Storybook.
inicio npx sb --constructor webpack5
Este comando detecta el proyecto en el que está trabajando, instala todos los paquetes necesarios y crea historias de ejemplo.
Configurar CSS
Lo primero que debe hacer es incluir el archivo CSS global en preview.js.
Configurar estilos globales
Los estilos globales se aplican en toda la aplicación. Para aplicar estos estilos en historias, puede importar el archivo en historias individuales y eso funcionaría. Sin embargo, terminaría reescribiendo la declaración de importación en muchas historias o incluso olvidándose de hacerlo.
Una mejor solución es importar los estilos globales en el archivo .libro de cuentos/preview.js archivo, un archivo que contiene todas las configuraciones compartidas para Storybook.
En la parte superior de .storybook/preview.js, incluya la siguiente declaración de importación.
importar "../estilos/globales.css";
Configurar Sass para Storybook en Next.js
De manera predeterminada, Storybook no viene con soporte listo para usar para el Lenguaje de extensión Sass. Debe ampliar la configuración del paquete web instalando style-loader, css-loader y sass-loader.
npm i -D estilo-cargador css-loader sass-loader
Esto es lo que hacen estos paquetes:
- style-loader inyecta CSS en el DOM.
- css-loader interpreta @import y URL() como import/require y los resuelve.
- sass-loader carga SCSS en CSS.
Para configurar estos paquetes, agregue el siguiente código en .storybook/main.js:
constante camino = requerir('camino');
módulo.exportaciones = {
// otras configuraciones
paquete webFinal: asíncrono (configuración) => {
config.módulo.rules.push(
{
prueba: /\\.s(a|c)ss$/,
incluyen: ruta.resolve (__dirname, '../'),
usar: [
'estilo-cargador',
{
cargador: 'cargador css',
opciones: {
módulos: {
auto: verdadero,
localIdentName: '[nombre]__[local]--[hash: base64:5]',
},
},
},
'cargador sass'
],
},
);
devolver configuración;
}
}
Después de esto, Sass debería estar disponible en Storybook.
Aplicar la propiedad no optimizada a las imágenes de Next.js
Next.js tiene muchas funciones de optimización. Uno de ellos es la optimización de imágenes a través del componente de imagen que hace que las imágenes se carguen más rápido y se adapten a la pantalla. Sin embargo, es una molestia trabajar con Storybook, ya que Storybook se ejecuta de forma aislada del entorno Next.js. Es mejor desoptimizar las imágenes en las historias.
Para comenzar, debe servir el directorio público en Storybook para indicar dónde se encuentran las imágenes. Puedes hacerlo en el guiones npm mapa en el paquete.json archivo o en .storybook/main.js.
En paquete.json, actualice los guiones de Storybook para servir al directorio público.
"guiones": {
"libro de cuentos": "start-storybook -p 6006 -s ./public",
"construir-libro de cuentos": "build-storybook -s público"
}
Alternativamente, modifique ./libro de cuentos/main.js para incluir el directorio estático que, en este caso, es la carpeta pública.
módulo.exportaciones = {
// otras configuraciones
"direcciones estáticas": [ "../público" ],
}
Después de servir el directorio público, aplique la propiedad no optimizada a las imágenes de Next.js utilizadas en las historias.
En .storybook/main.js, agregue el siguiente código:
importar * como SiguienteImagen de "siguiente/imagen";
constante OriginalNextImage = SiguienteImagen.por defecto;
Objeto.defineProperty (Imagen siguiente, "por defecto", {
configurable: verdadero,
valor: (accesorios) => (
<Imagen siguiente original
{...accesorios}
no optimizado
/>
),
});
Este código usa la propiedad no optimizada en cualquier lugar donde se use el componente de imagen.
Uso de Storybook en Next.js
Storybook es una de esas herramientas que crees que son demasiado tediosas de usar, pero una vez que comienzas a usarlas, te das cuenta de lo que te estabas perdiendo. Con Storybook, puede crear y probar diferentes componentes sin ejecutar toda la aplicación. Por lo tanto, simplifica la construcción de componentes desde cero.
Si usa Next.js, asegúrese de configurar el CSS y desoptimizar las imágenes antes de comenzar.
