A Storybook egy hatékony eszköz a felhasználói felület összetevőinek elkülönített felépítéséhez. Segít az összetevők létrehozásában és tesztelésében a teljes alkalmazás futtatása nélkül.

Ha valaha is használta a Storybookot a Next.js-szal, akkor észre fogja venni, hogy be kell állítania a CSS és a képek megfelelő kezeléséhez. A folyamat frusztráló lehet, de ezek az egyszerű lépések segítik az utat.

Kezdje a Next.js projekt beállításával

Ha még nincs beállítva Next.js projektje, kövesse a hivatalos utasításokat Next.js Első lépések útmutató új projekt létrehozásához.

Inicializálja a mesekönyvet

Futtassa a következő parancsot a terminálban a Storybook inicializálásához.

npx sb init --builder webpack5

Ez a parancs észleli a projektet, amelyen dolgozik, telepíti az összes szükséges csomagot, és példasztorikat hoz létre.

CSS beállítása

Az első dolog, amit meg kell tennie, hogy belefoglalja a globális CSS-fájlt a preview.js fájlba.

Globális stílusok beállítása

A globális stílusok a teljes alkalmazásra érvényesek. Ha ezeket a stílusokat történetekben szeretné alkalmazni, importálhatja a fájlt egyedi történetekbe, és ez működni fog. Azonban a végén átírná az importálási utasítást sok történetben, vagy akár elfelejtené.

instagram viewer

Jobb megoldás a globális stílusok importálása a .storybook/preview.js fájl, amely a Storybook összes megosztott konfigurációját tartalmazza.

A .storybook/preview.js fájl tetején tartalmazza a következő importálási utasítást.

import "../styles/globals.css";

Állítsa be a Sass for Storybook alkalmazást a Next.js-ben

A Storybook alapértelmezés szerint nem támogatja a Sass kiterjesztési nyelv. Ki kell bővítenie a webcsomag konfigurációját a style-loader, a css-loader és a sass-loader telepítésével.

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

Íme, mit csinálnak ezek a csomagok:

  • A style-loader beadja a CSS-t a DOM-ba.
  • A css-loader úgy értelmezi az @import és URL(), mint az import/require, és feloldja őket.
  • A sass-loader betölti az SCSS-t a CSS-be.

A csomagok konfigurálásához adja hozzá a következő kódot a .storybook/main.js fájlhoz:

const útvonal = igényelnek('pálya');
modult.exports = {
// egyéb konfigurációk
 webpackFinal: async (config) => {
 config.module.rules.push(
 {
 teszt: /\\.s(a|c)ss$/,
 include: path.resolve (__dirname, '../'),
 használd: [
 "stílusbetöltő",
 {
 betöltő: 'css-loader',
 lehetőségek: {
 modulok: {
 auto: igaz,
 localIdentName: '[név]__[helyi]--[hash: base64:5]',
 },
 },
 },
 'sass-loader'
 ],
 },
 );
Visszatérés config;
 }
}

Ezek után a Sass elérhető lesz a Storybookban.

Alkalmazza az optimalizálatlan propot a Next.js képekre

A Next.js számos optimalizálási funkcióval rendelkezik. Az egyik a képoptimalizálás a képkomponensen keresztül, amely gyorsabbá teszi a képek betöltését és a képernyőhöz való alkalmazkodást. A Storybookban azonban fájdalmas dolgozni, mivel a Storybook a Next.js környezettől elszigetelten fut. Jobb, ha a történetekben a képeket optimalizáljuk.

A kezdéshez ki kell szolgálnia a Storybook nyilvános könyvtárát, hogy jelezze, hol találhatók a képek. Megteheti a npm szkriptek térkép a package.json fájl vagy be .storybook/main.js.

Ban ben package.json, frissítse a Storybook szkripteket a nyilvános könyvtár kiszolgálásához.

"forgatókönyvek": {
"mesekönyv": "start-mesekönyv -p 6006 -s ./nyilvános",
"build-mesekönyv": "build-storibook -s nyilvános"
}

Alternatív megoldásként módosítsa ./storybook/main.js hogy tartalmazza a statikus könyvtárat, amely ebben az esetben a nyilvános mappa.

modult.export = {
// egyéb konfigurációk
"staticDirs": [ "../nyilvános" ],
}

A nyilvános könyvtár kiszolgálása után alkalmazza az optimalizálatlan kelléket a történetekben használt Next.js-képekre.

A .storybook/main.js fájlban adja hozzá a következő kódot:

import * mint KövetkezőKép tól től "következő/kép";
const OriginalNextImage = NextImage.alapértelmezett;
Tárgy.defineProperty (NextImage, "alapértelmezett", {
 konfigurálható: igaz,
 érték: (kellékek) => (
<OriginalNextImage
 {...kellékek}
 optimalizálatlan
 />
 ),
});

Ez a kód az optimalizálatlan kelléket használja bárhol, ahol a képkomponenst használják.

A Storybook használata a Next.js-ben

A Storybook egyike azoknak az eszközöknek, amelyekről úgy gondolja, hogy túl fárasztó használni, de miután elkezdi használni őket, rájön, mi hiányzott. A Storybook segítségével a teljes alkalmazás futtatása nélkül hozhat létre és tesztelhet különböző összetevőket. Ezért az építőelemeket az alapoktól kezdve egyszerűvé teszi.

Ha Next.js-t használ, győződjön meg róla, hogy konfigurálta a CSS-t, és deaktiválja a képeket, mielőtt elkezdi.