Storybook je moćan alat za izradu komponenti korisničkog sučelja u izolaciji. Pomaže vam u stvaranju i testiranju komponenti bez pokretanja cijele aplikacije.
Ako ste ikada koristili Storybook s Next.js, primijetit ćete da ga morate konfigurirati da pravilno rukuje CSS-om i slikama. Proces može biti frustrirajući, ali ovi jednostavni koraci pomoći će vam u tome.
Započnite postavljanjem Next.js projekta
Ako već nemate postavljen projekt Next.js, slijedite službeni Dalje.js Vodič za početak rada za izradu novog projekta.
Inicijaliziraj knjigu priča
Pokrenite sljedeću naredbu u terminalu da biste pokrenuli Storybook.
npx sb init --builder webpack5
Ova naredba otkriva projekt na kojem radite, instalira sve potrebne pakete i stvara primjere priča.
Postavite CSS
Prva stvar koju trebate učiniti je uključiti globalnu CSS datoteku u preview.js.
Postavite globalne stilove
Globalni stilovi primjenjuju se na cijelu aplikaciju. Da biste primijenili ove stilove u pričama, mogli biste uvesti datoteku u pojedinačne priče i to bi funkcioniralo. Međutim, na kraju biste prepisali izjavu uvoza u mnogim pričama ili čak zaboravili.
Bolje rješenje je uvoz globalnih stilova u .knjiga priča/preview.js datoteku, datoteku koja sadrži sve zajedničke konfiguracije za Storybook.
Na vrhu .storybook/preview.js uključite sljedeću izjavu o uvozu.
uvoz "../styles/globals.css";
Postavite Sass za Storybook u Next.js
Prema zadanim postavkama, Storybook ne dolazi s većom podrškom za Jezik proširenja Sass. Morate proširiti konfiguraciju webpacka instaliranjem style-loadera, css-loadera i sass-loadera.
npm i -D style-loader css-loader sass-loader
Evo što ovi paketi rade:
- style-loader ubacuje CSS u DOM.
- css-loader tumači @import i URL() kao import/require i rješava ih.
- sass-loader učitava SCSS u CSS.
Za konfiguraciju ovih paketa dodajte sljedeći kod u .storybook/main.js:
konst put = zahtijevati('staza');
modul.izvoz = {
// druge konfiguracije
webpackfinale: asinkroni (konfiguracija) => {
config.module.rules.push(
{
test: /\\.s(a|c)ss$/,
uključi: path.resolve (__dirname, '../'),
koristiti: [
'style-loader',
{
učitavač: 'css-učitavač',
opcije: {
moduli: {
auto: pravi,
localIdentName: '[name]__[local]--[hash: base64:5]',
},
},
},
'sass-loader'
],
},
);
povratak konfiguracija;
}
}
Nakon ovoga, Sass bi trebao biti dostupan u Storybooku.
Primijenite Unoptimized Prop na Next.js slike
Next.js ima mnoge značajke optimizacije. Jedan od njih je optimizacija slike kroz komponentu slike koja čini da se slike brže učitavaju i prilagođavaju ekranu. Međutim, teško je raditi s njim u Storybooku budući da Storybook radi izolirano od okruženja Next.js. Bolje je deoptimizirati slike u pričama.
Za početak, trebate poslužiti javni imenik u Storybooku kako biste naznačili gdje se nalaze slike. Možete to učiniti u npm skripte karta u paket.json datoteku ili in .storybook/main.js.
U paket.json, ažurirajte skripte knjige priča da služe javnom imeniku.
"skripte": {
"knjiga pripovjedaka": "start-storybook -p 6006 -s ./public",
"graditi-pričaonica": "build-storybook -s javno"
}
Alternativno, izmijenite ./storybook/main.js uključiti statički direktorij koji je u ovom slučaju javna mapa.
modul.izvozi = {
// druge konfiguracije
"staticDirs": [ "../javnost" ],
}
Nakon posluživanja javnog imenika, primijenite neoptimizirani prop na Next.js slike koje se koriste u pričama.
U .storybook/main.js dodajte sljedeći kod:
uvoz * kao Sljedeća slika iz "sljedeća/slika";
konst OriginalNextImage = Sljedeća slika.zadano;
Objekt.defineProperty (Sljedeća slika, "zadano", {
podesivo: pravi,
vrijednost: (rekviziti) => (
<Originalna sljedeća slika
{...rekviziti}
neoptimizirano
/>
),
});
Ovaj kod koristi neoptimizirani rekvizit gdje god se koristi komponenta slike.
Korištenje knjige priča u Next.js
Knjiga priča jedan je od onih alata za koje mislite da su previše zamorni za korištenje, ali kada ih počnete koristiti, shvatit ćete što ste propuštali. Uz Storybook možete stvarati i testirati različite komponente bez pokretanja cijele aplikacije. Stoga čini građevne komponente od temelja jednostavnima.
Ako koristite Next.js, provjerite jeste li konfigurirali CSS i deoptimizirali slike prije nego što počnete.