Storybook on tehokas työkalu käyttöliittymäkomponenttien rakentamiseen eristyksissä. Sen avulla voit luoda ja testata komponentteja suorittamatta koko sovellusta.

Jos olet joskus käyttänyt Storybookia Next.js: n kanssa, huomaat, että sinun on määritettävä se käsittelemään CSS: ää ja kuvia oikein. Prosessi voi olla turhauttavaa, mutta nämä yksinkertaiset vaiheet auttavat näyttämään tietä.

Aloita määrittämällä Next.js-projekti

Jos et ole vielä määrittänyt Next.js-projektia, seuraa virallisia ohjeita Next.js Aloitusopas uuden projektin luomiseen.

Alusta tarinakirja

Suorita seuraava komento päätteessä alustaaksesi Storybook.

npx sb init --builder webpack5

Tämä komento tunnistaa projektin, jonka parissa työskentelet, asentaa kaikki tarvittavat paketit ja luo esimerkkitarinoita.

Määritä CSS

Ensimmäinen asia, joka sinun on tehtävä, on sisällyttää yleinen CSS-tiedosto preview.js-tiedostoon.

Määritä globaalit tyylit

Yleiset tyylit koskevat koko sovellusta. Jos haluat käyttää näitä tyylejä tarinoissa, voit tuoda tiedoston yksittäisiin tarinoihin ja se toimisi. Kuitenkin joudut kirjoittamaan tuontilausekkeen useiden tarinoiden mukaan tai jopa unohtamaan sen.

Parempi ratkaisu on tuoda globaalit tyylit tiedostoon .storybook/preview.js tiedosto, joka sisältää kaikki Storybookin jaetut asetukset.

Sisällytä seuraava tuontilauseke .storybook/preview.js-tiedoston yläosaan.

tuonti "../styles/globals.css";

Ota Sass for Storybook käyttöön Next.js: ssä

Oletusarvoisesti Storybookissa ei ole valmiina tukea Sass-laajennuskieli. Sinun on laajennettava verkkopaketin määritystä asentamalla style-loader, css-loader ja sass-loader.

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

Tässä on mitä nämä paketit tekevät:

  • style-loader ruiskuttaa CSS: n DOM: iin.
  • css-loader tulkitsee @import ja URL(), kuten import/require, ja ratkaisee ne.
  • sass-loader lataa SCSS: n CSS: ään.

Voit määrittää nämä paketit lisäämällä seuraavan koodin tiedostoon .storybook/main.js:

konst polku = vaatia('polku');
moduuli.exports = {
// muut kokoonpanot
 webpackFinal: asynk (config) => {
 config.module.rules.push(
 {
 testata: /\\.s(a|c)ss$/,
 include: path.resolve (__dirname, '../'),
 käytä: [
 "tyylilataaja",
 {
 loader: 'css-loader',
 vaihtoehdot: {
 moduulit: {
 auto: totta,
 localIdentName: '[nimi]__[paikallinen]--[hash: base64:5]',
 },
 },
 },
 "sass-loader"
 ],
 },
 );
palata konfigurointi;
 }
}

Tämän jälkeen Sassin pitäisi olla saatavilla Storybookissa.

Käytä optimoimatonta ehdotusta Next.js-kuviin

Next.js: ssä on monia optimointiominaisuuksia. Yksi niistä on kuvan optimointi kuvakomponentin avulla, joka saa kuvat latautumaan nopeammin ja mukautumaan näyttöön. Sen kanssa työskentely Storybookissa on kuitenkin tuskaa, koska Storybook toimii erillään Next.js-ympäristöstä. Tarinoiden kuvien optimointi on parempi.

Aloittaaksesi sinun on tarjottava Storybookin julkinen hakemisto, joka osoittaa, missä kuvat sijaitsevat. Voit tehdä sen osoitteessa npm-skriptit kartta package.json tiedosto tai sisään .storybook/main.js.

Sisään package.json, päivitä Storybook-skriptit palvelemaan julkista hakemistoa.

"käsikirjoituksia": {
"satukirja": "aloitus-satukirja -p 6006 -s ./julkinen",
"rakentaa-satukirja": "rakentaa-satukirja -s julkinen"
}

Vaihtoehtoisesti muokkaa ./storybook/main.js sisällyttääksesi staattisen hakemiston, joka tässä tapauksessa on julkinen kansio.

moduuli.vientiä = {
// muut kokoonpanot
"staticDirs": [ "../julkinen" ],
}

Käytä julkisen hakemiston käyttämisen jälkeen optimoimatonta ehdotusta tarinoissa käytettyihin Next.js-kuviin.

Lisää tiedostoon .storybook/main.js seuraava koodi:

tuonti * kuten Seuraava kuva alkaen "seuraava/kuva";
konst OriginalNextImage = NextImage.oletuksena;
Esine.defineProperty (NextImage, "oletuksena", {
 konfiguroitavissa: totta,
 arvo: (rekvisiitta) => (
<OriginalNextImage
 {...rekvisiitta}
 optimoimaton
 />
 ),
});

Tämä koodi käyttää optimoimatonta rekvisiittaa kaikkialla, missä kuvakomponenttia käytetään.

Satukirjan käyttäminen Next.js: ssä

Storybook on yksi niistä työkaluista, joiden käyttäminen on mielestäsi liian työlästä, mutta kun aloitat niiden käytön, huomaat, mitä kaipasit. Storybookin avulla voit luoda ja testata erilaisia ​​komponentteja suorittamatta koko sovellustasi. Siksi se tekee rakentamisesta yksinkertaisia ​​alusta alkaen.

Jos käytät Next.js: ää, varmista, että määrität CSS: n ja poistat kuvien optimoinnin ennen aloittamista.