Storybook er et kraftfuldt værktøj til at bygge UI-komponenter isoleret. Det hjælper dig med at oprette og teste komponenter uden at køre hele applikationen.

Hvis du nogensinde har brugt Storybook med Next.js, vil du bemærke, at du skal konfigurere den til at håndtere CSS og billeder korrekt. Processen kan være frustrerende, men disse enkle trin vil hjælpe med at vise vejen.

Start med at konfigurere Next.js-projektet

Hvis du ikke allerede har et Next.js-projekt opsat, skal du følge den officielle Next.js Kom godt i gang guide til at oprette et nyt projekt.

Initialiser Storybook

Kør følgende kommando i terminalen for at initialisere Storybook.

npx sb init --builder webpack5

Denne kommando registrerer det projekt, du arbejder på, installerer alle de nødvendige pakker og opretter eksempelhistorier.

Konfigurer CSS

Den første ting du skal gøre er at inkludere den globale CSS-fil i preview.js.

Konfigurer globale stilarter

De globale stilarter gælder på tværs af hele applikationen. For at anvende disse stilarter i historier, kan du importere filen til individuelle historier, og det ville fungere. Du ville dog ende med at omskrive importerklæringen på tværs af mange historier eller endda glemme det.

instagram viewer

En bedre løsning er at importere de globale stilarter i .storybook/preview.js fil, en fil, der indeholder alle de delte konfigurationer til Storybook.

Øverst i .storybook/preview.js skal du inkludere følgende importerklæring.

importere "../styles/globals.css";

Konfigurer Sass til Storybook i Next.js

Som standard leveres Storybook ikke med out-of-the-box support til Sass udvidelsessprog. Du skal udvide webpack-konfigurationen ved at installere style-loader, css-loader og sass-loader.

npm i -D style-loader css-loader sass-loader

Her er hvad disse pakker gør:

  • style-loader injicerer CSS i DOM.
  • css-loader fortolker @import og URL() som import/require og løser dem.
  • sass-loader indlæser SCSS til CSS.

For at konfigurere disse pakker skal du tilføje følgende kode i .storybook/main.js:

konst sti = kræve('sti');
modul.exports = {
// andre konfigurationer
 webpackFinal: asynkron (config) => {
 config.module.rules.push(
 {
 prøve: /\\.s(a|c)ss$/,
 inkludere: path.resolve (__dirname, '../'),
 brug: [
 'style-loader',
 {
 loader: 'css-loader',
 muligheder: {
 moduler: {
 auto: rigtigt,
 localIdentName: '[navn]__[lokal]--[hash: base64:5]',
 },
 },
 },
 'sass-loader'
 ],
 },
 );
Vend tilbage config;
 }
}

Herefter skulle Sass være tilgængelig i Storybook.

Anvend den uoptimerede prop på Next.js-billeder

Next.js har mange optimeringsfunktioner. En af dem er billedoptimering gennem billedkomponenten, som gør, at billeder indlæses hurtigere og tilpasser sig skærmen. Det er dog en smerte at arbejde med i Storybook, da Storybook kører isoleret fra Next.js-miljøet. Det er bedre at de-optimere billeder i historier.

For at starte skal du betjene den offentlige mappe i Storybook for at angive, hvor billederne er placeret. Du kan gøre det i npm scripts kort i package.json fil eller i .storybook/main.js.

I package.json, opdater Storybook-scripts for at tjene den offentlige mappe.

"scripts": {
"historiebog": "start-historiebog -p 6006 -s ./offentlig",
"bygge-historiebog": "bygge-historiebog -s offentlige"
}

Alternativt kan du ændre ./storybook/main.js at inkludere den statiske mappe, som i dette tilfælde er den offentlige mappe.

modul.eksport = {
// andre konfigurationer
"staticDirs": [ "../offentlig" ],
}

Når du har serveret den offentlige mappe, skal du anvende den uoptimerede prop på Next.js-billederne, der bruges i historier.

Tilføj følgende kode i .storybook/main.js:

importere * som Næste billede fra "næste/billede";
konst OriginalNextImage = NextImage.Standard;
Objekt.defineProperty (NextImage, "Standard", {
 konfigurerbar: rigtigt,
 værdi: (rekvisitter) => (
<OriginalNextImage
 {...rekvisitter}
 uoptimeret
 />
 ),
});

Denne kode bruger den uoptimerede prop overalt, hvor billedkomponenten bruges.

Brug af Storybook i Next.js

Storybook er et af de værktøjer, du synes er for kedelige at bruge, men når du først begynder at bruge dem, indser du, hvad du manglede. Med Storybook kan du oprette og teste forskellige komponenter uden at køre hele din applikation. Det gør derfor byggekomponenter fra bunden af ​​enkle.

Hvis du bruger Next.js, skal du sørge for at konfigurere CSS og de-optimere billeder, før du går i gang.