Storybook on võimas tööriist kasutajaliidese komponentide eraldamiseks. See aitab teil luua ja testida komponente ilma kogu rakendust käivitamata.

Kui olete kunagi kasutanud Storybooki koos failiga Next.js, märkate, et peate selle konfigureerima, et CSS-i ja pilte õigesti käsitseda. Protsess võib olla masendav, kuid need lihtsad sammud aitavad teed näidata.

Alustage projekti Next.js seadistamisega

Kui teil ei ole veel Next.js projekti seadistatud, järgige ametnikku Next.js Alustamisjuhend uue projekti loomiseks.

Initsialiseeri juturaamat

Juturaamatu lähtestamiseks käivitage terminalis järgmine käsk.

npx sb init --builder webpack5

See käsk tuvastab projekti, mille kallal töötate, installib kõik vajalikud paketid ja loob näidislugusid.

Seadistage CSS

Esimene asi, mida peate tegema, on globaalse CSS-faili lisamine faili preview.js.

Globaalsete stiilide seadistamine

Globaalsed stiilid kehtivad kogu rakenduses. Nende stiilide rakendamiseks lugudes saate faili importida üksikuteks lugudeks ja see toimiks. Siiski kirjutaksite impordiavalduse paljude lugude vahel ümber või unustaksite selle.

instagram viewer

Parem lahendus on importida globaalsed stiilid faili .storybook/preview.js fail, mis sisaldab kõiki Storybooki jagatud konfiguratsioone.

Lisage faili .storybook/preview.js ülaossa järgmine impordilause.

importida "../styles/globals.css";

Seadistage Sass juturaamatu jaoks rakenduses Next.js

Vaikimisi ei ole Storybook'il selle jaoks karbist väljas tuge Sassi laienduskeel. Peate veebipaketi konfiguratsiooni laiendama, installides style-loader, css-loader ja sass-loader.

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

Need paketid teevad järgmist:

  • style-loader sisestab CSS-i DOM-i.
  • css-loader tõlgendab @import ja URL() nagu import/require ja lahendab need.
  • sass-loader laadib SCSS-i CSS-i.

Nende pakettide konfigureerimiseks lisage faili .storybook/main.js järgmine kood:

konst tee = nõuda('tee');
moodul.exports = {
// muud konfiguratsioonid
 webpackFinal: asünkr (config) => {
 config.module.rules.push(
 {
 test: /\\.s(a|c)ss$/,
 include: path.resolve (__dirname, '../'),
 kasuta: [
 "stiililaadur",
 {
 laadija: 'css-loader',
 valikud: {
 moodulid: {
 auto: tõsi,
 localIdentName: '[nimi]__[kohalik]--[räsi: base64:5]',
 },
 },
 },
 'sass-loader'
 ],
 },
 );
tagasi konfiguratsioon;
 }
}

Pärast seda peaks Sass olema Storybookis saadaval.

Rakendage Next.js-piltide jaoks optimeerimata rekvisiidi

Next.js-il on palju optimeerimisfunktsioone. Üks neist on pildi optimeerimine pildikomponendi kaudu, mis muudab pildid kiiremini laaditud ja kohanevad ekraaniga. Storybookiga on aga valus töötada, kuna Storybook töötab Next.js keskkonnast eraldatult. Parem on piltide optimeerimine lugudes.

Alustuseks peate esitama Storybookis avalikku kataloogi, et näidata, kus pildid asuvad. Saate seda teha jaotises npm skriptid kaardil package.json faili või sisse .storybook/main.js.

sisse package.json, värskendage Storybooki skripte avaliku kataloogi teenindamiseks.

"skriptid": {
"juturaamat": "algus-juturaamat -p 6006 -s ./avalik",
"ehita-juturaamat": "ehita-juturaamat -s avalik"
}

Teise võimalusena muutke ./storybook/main.js staatilise kataloogi lisamiseks, mis antud juhul on avalik kaust.

moodul.eksporti = {
// muud konfiguratsioonid
"staticDirs": [ "../avalik" ],
}

Pärast avaliku kataloogi teenindamist rakendage optimeerimata rekvisiit lugudes kasutatavatele Next.js-piltidele.

Lisage failile .storybook/main.js järgmine kood:

importida * nagu JärgminePilt alates "järgmine/pilt";
konst OriginalNextImage = Järgmine pilt.vaikimisi;
Objekt.defineProperty (NextImage, "vaikimisi", {
 konfigureeritav: tõsi,
 väärtus: (rekvisiidid) => (
<OriginalNextImage
 {...rekvisiidid}
 optimeerimata
 />
 ),
});

See kood kasutab optimeerimata rekvisiidi kõikjal, kus pildikomponenti kasutatakse.

Juturaamatu kasutamine rakenduses Next.js

Storybook on üks neist tööriistadest, mis on teie arvates liiga tüütu kasutada, kuid kui hakkate neid kasutama, saate aru, millest ilma jäite. Storybookiga saate luua ja katsetada erinevaid komponente ilma kogu rakendust käivitamata. Seetõttu muudab see ehitusdetailid algusest peale lihtsaks.

Kui kasutate faili Next.js, konfigureerige enne alustamist kindlasti CSS-i ja deoptimeerige pildid.