Storybook er et kraftig verktøy for å bygge UI-komponenter isolert. Det hjelper deg med å lage og teste komponenter uten å kjøre hele applikasjonen.

Hvis du noen gang har brukt Storybook med Next.js, vil du legge merke til at du må konfigurere den til å håndtere CSS og bilder riktig. Prosessen kan være frustrerende, men disse enkle trinnene vil bidra til å lede veien.

Start med å sette opp Next.js-prosjektet

Hvis du ikke allerede har satt opp et Next.js-prosjekt, følg den offisielle Next.js Komme i gang-veiledning for å lage et nytt prosjekt.

Initialiser Storybook

Kjør følgende kommando i terminalen for å initialisere Storybook.

npx sb init --builder webpack5

Denne kommandoen oppdager prosjektet du jobber med, installerer alle nødvendige pakker og lager eksempelhistorier.

Sett opp CSS

Det første du må gjøre er å inkludere den globale CSS-filen i preview.js.

Sett opp globale stiler

De globale stilene gjelder for hele applikasjonen. For å bruke disse stilene i historier, kan du importere filen til individuelle historier, og det ville fungere. Imidlertid vil du ende opp med å omskrive importerklæringen på tvers av mange historier eller til og med glemme det.

instagram viewer

En bedre løsning er å importere de globale stilene i .storybook/preview.js fil, en fil som inneholder alle de delte konfigurasjonene for Storybook.

På toppen av .storybook/preview.js inkluderer du følgende importerklæring.

import "../styles/globals.css";

Sett opp Sass for Storybook i Next.js

Som standard kommer ikke Storybook med ut-av-boksen støtte for Sass utvidelsesspråk. Du må utvide webpack-konfigurasjonen ved å installere style-loader, css-loader og sass-loader.

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

Her er hva disse pakkene gjør:

  • style-loader injiserer CSS i DOM.
  • css-loader tolker @import og URL() som import/require og løser dem.
  • sass-loader laster SCSS inn i CSS.

For å konfigurere disse pakkene, legg til følgende kode i .storybook/main.js:

konst sti = krever('sti');
modul.exports = {
// andre konfigurasjoner
 webpackFinal: asynkron (config) => {
 config.module.rules.push(
 {
 test: /\\.s(a|c)ss$/,
 inkluderer: path.resolve (__dirnavn, '../'),
 bruk: [
 'style-loader',
 {
 loader: 'css-loader',
 alternativer: {
 moduler: {
 auto: ekte,
 localIdentName: '[navn]__[lokal]--[hash: base64:5]',
 },
 },
 },
 'sass-loader'
 ],
 },
 );
komme tilbake config;
 }
}

Etter dette skal Sass være tilgjengelig i Storybook.

Bruk uoptimalisert prop på Next.js-bilder

Next.js har mange optimaliseringsfunksjoner. En av dem er bildeoptimalisering gjennom bildekomponenten som gjør at bilder lastes raskere og tilpasser seg skjermen. Det er imidlertid vanskelig å jobbe med i Storybook siden Storybook kjører isolert fra Next.js-miljøet. Det er bedre å de-optimalisere bilder i historier.

For å starte, må du betjene den offentlige katalogen i Storybook for å indikere hvor bildene er plassert. Du kan gjøre det i npm-skript kart i package.json fil eller i .storybook/main.js.

I package.json, oppdater Storybook-skriptene for å betjene den offentlige katalogen.

"skript": {
"historiebok": "start-historiebok -p 6006 -s ./offentlig",
"bygge-historiebok": "bygge-historiebok -s offentlige"
}

Alternativt, endre ./storybook/main.js å inkludere den statiske katalogen som i dette tilfellet er den offentlige mappen.

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

Etter å ha servert den offentlige katalogen, bruk den uoptimaliserte rekvisitten på Next.js-bildene som brukes i historier.

I .storybook/main.js legger du til følgende kode:

import * som Neste bilde fra "neste/bilde";
konst OriginalNextImage = NextImage.misligholde;
Gjenstand.defineProperty (NextImage, "misligholde", {
 konfigurerbar: ekte,
 verdi: (rekvisitter) => (
<OriginalNextImage
 {...Rekvisitter}
 uoptimalisert
 />
 ),
});

Denne koden bruker den uoptimaliserte rekvisitten hvor som helst hvor bildekomponenten brukes.

Bruke Storybook i Next.js

Storybook er et av de verktøyene du synes er for kjedelige å bruke, men når du først begynner å bruke dem, skjønner du hva du gikk glipp av. Med Storybook kan du lage og teste ut forskjellige komponenter uten å kjøre hele applikasjonen. Det gjør derfor byggekomponenter fra grunnen av enkle.

Hvis du bruker Next.js, sørg for at du konfigurerer CSS og deoptimerer bilder før du begynner.