Storybook je močno orodje za izdelavo komponent uporabniškega vmesnika v izolaciji. Pomaga vam ustvariti in preizkusiti komponente, ne da bi zagnali celotno aplikacijo.

Če ste kdaj uporabljali Storybook z Next.js, boste opazili, da ga morate konfigurirati za pravilno obdelavo CSS in slik. Postopek je lahko frustrirajoč, vendar vam bodo ti preprosti koraki pomagali voditi.

Začnite z nastavitvijo projekta Next.js

Če še nimate nastavljenega projekta Next.js, sledite uradnemu Next.js Vodnik za začetek za ustvarjanje novega projekta.

Inicializiraj Storybook

Zaženite naslednji ukaz v terminalu, da inicializirate Storybook.

npx sb začet --builder webpack5

Ta ukaz zazna projekt, na katerem delate, namesti vse potrebne pakete in ustvari primere zgodb.

Nastavite CSS

Prva stvar, ki jo morate storiti, je vključiti globalno datoteko CSS v preview.js.

Nastavite globalne sloge

Globalni slogi veljajo za celotno aplikacijo. Če želite uporabiti te sloge v zgodbah, lahko uvozite datoteko v posamezne zgodbe in to bi delovalo. Vendar pa bi na koncu prepisali uvozno izjavo v številnih zgodbah ali celo pozabili.

instagram viewer

Boljša rešitev je uvoz globalnih slogov v .storybook/preview.js datoteka, ki vsebuje vse skupne konfiguracije za Storybook.

Na vrh .storybook/preview.js vključite naslednji uvozni stavek.

uvoz "../styles/globals.css";

Nastavite Sass za Storybook v Next.js

Storybook privzeto nima podpore za Jezik razširitve Sass. Konfiguracijo spletnega paketa morate razširiti z namestitvijo nalagalnika stilov, nalagalnika css in nalagalnika sass.

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

Evo, kaj naredijo ti paketi:

  • style-loader vstavi CSS v DOM.
  • css-loader interpretira @import in URL() kot import/require in ju razreši.
  • sass-loader naloži SCSS v CSS.

Če želite konfigurirati te pakete, dodajte to kodo v .storybook/main.js:

konst pot = zahtevati('pot');
modul.exports = {
// druge konfiguracije
 webpackFinal: asinh (konfiguracija) => {
 config.module.rules.push(
 {
 test: /\\.s(a|c)ss$/,
 vključujejo: path.resolve (__dirname, '../'),
 uporaba: [
 'style-loader',
 {
 nalagalnik: 'css-nalagalnik',
 opcije: {
 moduli: {
 avto: prav,
 localIdentName: '[name]__[local]--[hash: base64:5]',
 },
 },
 },
 'sass-loader'
 ],
 },
 );
vrnitev konfiguracija;
 }
}

Po tem bi moral biti Sass na voljo v Storybook.

Uporabi Unoptimized Prop za slike Next.js

Next.js ima veliko optimizacijskih funkcij. Eden od njih je optimizacija slike prek komponente slike, ki poskrbi, da se slike hitreje nalagajo in prilagajajo zaslonu. Vendar pa je težko delati s Storybook, saj Storybook deluje ločeno od okolja Next.js. Bolje je deoptimizirati slike v zgodbah.

Če želite začeti, morate v storitvi Storybook služiti javnemu imeniku, da označite, kje se slike nahajajo. To lahko storite v skripte npm zemljevid v package.json datoteko ali v .storybook/main.js.

notri package.json, posodobite skripte Storybook, da bodo služili javnemu imeniku.

"skripte": {
"knjiga zgodb": "start-storybook -p 6006 -s ./public",
"build-storybook": "build-storybook -s javno"
}

Druga možnost je, da spremenite ./storybook/main.js da vključite statični imenik, ki je v tem primeru javna mapa.

modul.izvoz = {
// druge konfiguracije
"staticDirs": [ "../javno" ],
}

Po serviranju javnega imenika uporabite neoptimizirano podporo za slike Next.js, uporabljene v zgodbah.

V .storybook/main.js dodajte to kodo:

uvoz * kot Naslednja slika od "naslednja/slika";
konst OriginalNextImage = Naslednja slika.privzeto;
Objekt.defineProperty (Naslednja slika, "privzeto", {
 nastavljivo: prav,
 vrednost: (rekviziti) => (
<Izvirna naslednja slika
 {...rekviziti}
 neoptimizirano
 />
 ),
});

Ta koda uporablja neoptimizirano podporo povsod, kjer je uporabljena slikovna komponenta.

Uporaba Storybook v Next.js

Storybook je eno od tistih orodij, za katera mislite, da so preveč dolgočasna za uporabo, a ko jih začnete uporabljati, ugotovite, kaj ste zamujali. S Storybook lahko ustvarite in preizkusite različne komponente, ne da bi zagnali celotno aplikacijo. Zato omogoča preprosto gradnjo komponent od začetka.

Če uporabljate Next.js, se prepričajte, da ste konfigurirali CSS in deoptimizirali slike, preden začnete.