Storybook yra galingas įrankis, leidžiantis kurti UI komponentus atskirai. Tai padeda kurti ir išbandyti komponentus nepaleidžiant visos programos.

Jei kada nors naudojote Storybook su Next.js, pastebėsite, kad turite ją sukonfigūruoti, kad tinkamai tvarkytumėte CSS ir vaizdus. Procesas gali būti varginantis, tačiau šie paprasti veiksmai padės parodyti kelią.

Pradėkite nuo Next.js projekto nustatymo

Jei dar nesate nustatę Next.js projekto, vadovaukitės oficialiais nurodymais Next.js Darbo pradžios vadovas, kaip sukurti naują projektą.

Inicijuoti pasakojimų knygą

Norėdami inicijuoti Storybook, terminale paleiskite šią komandą.

npx sb init --builder webpack5

Ši komanda aptinka projektą, su kuriuo dirbate, įdiegia visus reikiamus paketus ir sukuria pavyzdines istorijas.

Nustatykite CSS

Pirmas dalykas, kurį turite padaryti, yra įtraukti visuotinį CSS failą į preview.js.

Nustatykite pasaulinius stilius

Visuotiniai stiliai taikomi visai programai. Norėdami pritaikyti šiuos stilius istorijose, galite importuoti failą į atskiras istorijas ir tai veiks. Tačiau galiausiai perrašytumėte importo teiginį daugelyje istorijų arba net pamirštumėte.

instagram viewer

Geresnis sprendimas yra importuoti pasaulinius stilius į .istorijų knyga/preview.js failas, failas, kuriame yra visos bendrinamos Storybook konfigūracijos.

.storybook/preview.js viršuje įtraukite toliau pateiktą importavimo teiginį.

importuoti "../styles/globals.css";

Nustatykite Sass for Storybook programoje Next.js

Pagal numatytuosius nustatymus „Storybook“ nepalaikoma Sass plėtinio kalba. Turite išplėsti žiniatinklio paketo konfigūraciją įdiegdami style-loader, css-loader ir sass-loader.

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

Štai ką daro šie paketai:

  • style-loader įveda CSS į DOM.
  • css-loader interpretuoja @import ir URL() kaip importas/require ir juos išsprendžia.
  • sass-loader įkelia SCSS į CSS.

Norėdami sukonfigūruoti šiuos paketus, pridėkite šį kodą į .storybook/main.js:

konst kelias = reikalauti(„kelias“);
modulis.exports = {
// kitos konfigūracijos
 webpackFinal: async (konfigūracija) => {
 config.module.rules.push(
 {
 testas: /\\.s(a|c)ss$/,
 įtraukti: path.resolve (__adresas, '../'),
 naudoti: [
 „stiliaus krautuvas“,
 {
 krautuvas: 'css-loader',
 galimybės: {
 moduliai: {
 automatinis: tiesa,
 localIdentName: '[vardas]__[local]--[hash: base64:5]',
 },
 },
 },
 'sass-loader'
 ],
 },
 );
grąžinti konfigūracija;
 }
}

Po to „Sass“ turėtų būti pasiekiamas „Sorybook“.

Taikykite neoptimizuotą pasiūlymą Next.js vaizdams

Next.js turi daug optimizavimo funkcijų. Vienas iš jų yra vaizdo optimizavimas naudojant vaizdo komponentą, dėl kurio vaizdai greičiau įkeliami ir prisitaiko prie ekrano. Tačiau sunku dirbti su Storybook, nes Storybook veikia atskirai nuo Next.js aplinkos. Istorijose geriau deoptimizuoti vaizdus.

Norėdami pradėti, turite pateikti viešąjį katalogą Storybook, kad nurodytumėte, kur yra vaizdai. Tai galite padaryti npm scenarijus žemėlapyje esančiame package.json failą arba į .storybook/main.js.

Į package.json, atnaujinkite Storybook scenarijus, kad jie būtų aptarnaujami viešajame kataloge.

"scenarijus": {
"pasakojimų knyga": "pradžia-pasakojimų knyga -p 6006 -s ./vieša",
"statyti-pasakojimų knyga": "statybinė istorija – vieša"
}

Arba modifikuokite ./storybook/main.js įtraukti statinį katalogą, kuris šiuo atveju yra viešasis aplankas.

modulis.eksportas = {
// kitos konfigūracijos
"staticDirs": [ "../vieša" ],
}

Pateikę viešąjį katalogą, pritaikykite neoptimizuotą rekvizitą Next.js vaizdams, naudojamiems istorijose.

Į .storybook/main.js pridėkite šį kodą:

importuoti * kaip Kitas vaizdas iš "kitas / vaizdas";
konst OriginalNextImage = Kitas vaizdas.numatytas;
Objektas.defineProperty (NextImage, "numatytas", {
 konfigūruojama: tiesa,
 vertė: (rekvizitai) => (
<OriginalNextImage
 {...rekvizitai}
 neoptimizuotas
 />
 ),
});

Šis kodas naudoja neoptimizuotą rekvizitą visur, kur naudojamas vaizdo komponentas.

Pasakojimų knygos naudojimas Next.js

Pasakojimų knyga yra viena iš tų įrankių, kurie, jūsų manymu, yra pernelyg varginantys, bet kai tik pradėsite jais naudotis, suprasite, ko jums trūko. Naudodami Storybook galite kurti ir išbandyti įvairius komponentus nepaleidę visos programos. Todėl statybos komponentai nuo pat pradžių yra paprasti.

Jei naudojate Next.js, prieš pradėdami įsitikinkite, kad sukonfigūravote CSS ir deoptimizavote vaizdus.