Storybook est un outil puissant pour créer des composants d'interface utilisateur de manière isolée. Il vous aide à créer et à tester des composants sans exécuter l'intégralité de l'application.

Si vous avez déjà utilisé Storybook avec Next.js, vous remarquerez que vous devez le configurer pour gérer correctement les CSS et les images. Le processus peut être frustrant, mais ces étapes simples vous aideront à ouvrir la voie.

Commencez par configurer le projet Next.js

Si vous n'avez pas encore configuré de projet Next.js, suivez les instructions officielles Suivant.js Guide de démarrage pour créer un nouveau projet.

Initialiser le livre de contes

Exécutez la commande suivante dans le terminal pour initialiser Storybook.

npx qn init --builder webpack5

Cette commande détecte le projet sur lequel vous travaillez, installe tous les packages nécessaires et crée des exemples d'histoires.

Configurer CSS

La première chose à faire est d'inclure le fichier CSS global dans preview.js.

Configurer les styles globaux

Les styles globaux s'appliquent à l'ensemble de l'application. Pour appliquer ces styles dans les histoires, vous pouvez importer le fichier dans des histoires individuelles et cela fonctionnera. Cependant, vous finiriez par réécrire la déclaration d'importation dans de nombreuses histoires ou même par oublier.

Une meilleure solution consiste à importer les styles globaux dans le fichier .livre de contes/aperçu.js file, un fichier qui contient toutes les configurations partagées pour Storybook.

En haut de .storybook/preview.js, incluez l'instruction d'importation suivante.

importer "../styles/globals.css";

Configurer Sass pour Storybook dans Next.js

Par défaut, Storybook n'est pas fourni avec une prise en charge prête à l'emploi pour le Langage d'extension Sass. Vous devez étendre la configuration du webpack en installant style-loader, css-loader et sass-loader.

npm i -D chargeur de style chargeur css chargeur sass

Voici ce que font ces packages :

  • style-loader injecte du CSS dans le DOM.
  • css-loader interprète @import et URL() comme import/require et les résout.
  • sass-loader charge SCSS dans CSS.

Pour configurer ces packages, ajoutez le code suivant dans .storybook/main.js :

constante chemin = exiger('chemin');
module.exports = {
// autres configurations
 webpackFinal: asynchrone (config) => {
 config.module.rules.push(
 {
 test: /\\.s(a|c)ss$/,
 inclure: path.resolve (__dirname, '../'),
 utiliser: [
 'chargeur de style',
 {
 chargeur: 'css-loader',
 option: {
 modules: {
 auto: vrai,
 localIdentName: '[nom]__[local]--[hachage: base64 :5]',
 },
 },
 },
 'sass-loader'
 ],
 },
 );
retour configuration ;
 }
}

Après cela, Sass devrait être disponible dans Storybook.

Appliquer la prop non optimisée aux images Next.js

Next.js possède de nombreuses fonctionnalités d'optimisation. L'un d'eux est l'optimisation de l'image via le composant d'image qui accélère le chargement des images et s'adapte à l'écran. Il est cependant difficile de travailler avec Storybook car Storybook s'exécute indépendamment de l'environnement Next.js. Il est préférable de désoptimiser les images dans les histoires.

Pour commencer, vous devez servir le répertoire public dans Storybook pour indiquer où se trouvent les images. Vous pouvez le faire dans le scripts npm carte dans le package.json fichier ou dans .storybook/main.js.

Dans package.json, mettez à jour les scripts Storybook pour servir le répertoire public.

"scénarios": {
"livre de contes": "start-storybook -p 6006 -s ./public",
"construire-storybook": "build-storybook -s public"
}

Alternativement, modifiez ./storybook/main.js pour inclure le répertoire statique qui, dans ce cas, est le dossier public.

module.exportations = {
// autres configurations
"staticDirs": [ "../public" ],
}

Après avoir servi le répertoire public, appliquez le prop non optimisé aux images Next.js utilisées dans les histoires.

Dans .storybook/main.js, ajoutez le code suivant :

importer * comme Image suivante depuis "suivant/image" ;
constante OriginalNextImage = NextImage.défaut;
Objet.defineProperty (NextImage, "défaut", {
 configurable: vrai,
 valeur: (accessoires) => (
<OriginalNextImage
 {...accessoires}
 non optimisé
 />
 ),
});

Ce code utilise la prop non optimisée partout où le composant image est utilisé.

Utiliser Storybook dans Next.js

Storybook est l'un de ces outils que vous pensez être trop fastidieux à utiliser, mais une fois que vous commencez à les utiliser, vous réalisez ce qui vous manquait. Avec Storybook, vous pouvez créer et tester différents composants sans exécuter toute votre application. Cela simplifie donc la construction de composants à partir de zéro.

Si vous utilisez Next.js, assurez-vous de configurer le CSS et de désoptimiser les images avant de commencer.