Storybook je výkonný nástroj na vytváranie samostatných komponentov používateľského rozhrania. Pomáha vám vytvárať a testovať komponenty bez spustenia celej aplikácie.
Ak ste niekedy používali Storybook s Next.js, všimnete si, že ho musíte nakonfigurovať tak, aby správne spracovával CSS a obrázky. Tento proces môže byť frustrujúci, ale tieto jednoduché kroky vám pomôžu viesť cestu.
Začnite nastavením projektu Next.js
Ak ešte nemáte nastavený projekt Next.js, postupujte podľa oficiálnych informácií Next.js Príručka Začíname na vytvorenie nového projektu.
Inicializujte rozprávkovú knihu
Spustite nasledujúci príkaz v termináli a inicializujte Storybook.
npx sb init --webový balík tvorcu5
Tento príkaz zistí projekt, na ktorom pracujete, nainštaluje všetky potrebné balíky a vytvorí príklady príbehov.
Nastavte CSS
Prvá vec, ktorú musíte urobiť, je zahrnúť globálny súbor CSS do súboru preview.js.
Nastavte globálne štýly
Globálne štýly platia pre celú aplikáciu. Ak chcete použiť tieto štýly v príbehoch, môžete importovať súbor do jednotlivých príbehov a to by fungovalo. Nakoniec by ste však prepísali vyhlásenie o importe v mnohých príbehoch alebo dokonca na to zabudli.
Lepším riešením je importovať globálne štýly do súboru .storybook/preview.js file, súbor, ktorý obsahuje všetky zdieľané konfigurácie pre Storybook.
V hornej časti súboru .storybook/preview.js zahrňte nasledujúci príkaz na import.
importovať "../styles/globals.css";
Nastavte Sass pre Storybook v Next.js
V predvolenom nastavení sa Storybook nedodáva s priamou podporou pre Jazyk rozšírenia Sass. Konfiguráciu webpacku musíte rozšíriť inštaláciou style-loader, css-loader a sass-loader.
npm i -D style-loader css-loader sass-loader
Tu je to, čo tieto balíčky robia:
- style-loader vloží CSS do DOM.
- css-loader interpretuje @import a URL() ako import/require a rieši ich.
- sass-loader načíta SCSS do CSS.
Ak chcete nakonfigurovať tieto balíky, pridajte nasledujúci kód do súboru .storybook/main.js:
konšt cesta = vyžadovať('cesta');
modul.exports = {
// iné konfigurácie
webpackFinal: async (config) => {
config.module.rules.push(
{
test: /\\.s(a|c)ss$/,
zahrnúť: path.resolve (__dirname, '../'),
použitie: [
'style-loader',
{
loader: 'css-loader',
možnosti: {
moduly: {
auto: pravda,
localIdentName: '[meno]__[miestne]--[hash: base64:5]',
},
},
},
'sass-loader'
],
},
);
vrátiť config;
}
}
Potom by mal byť Sass dostupný v Storybook.
Použite neoptimalizovanú rekvizitu na obrázky Next.js
Next.js má veľa optimalizačných funkcií. Jednou z nich je optimalizácia obrazu prostredníctvom obrazového komponentu, vďaka ktorému sa obrázky rýchlejšie načítavajú a prispôsobujú obrazovke. Práca s touto knihou je však náročná, pretože Storybook beží izolovane od prostredia Next.js. Obrázky v príbehoch je lepšie deoptimalizovať.
Ak chcete začať, musíte použiť verejný adresár v Storybook, aby ste označili, kde sa obrázky nachádzajú. Môžete to urobiť v skripty npm mapa v package.json súbor alebo v .storybook/main.js.
In package.json, aktualizujte skripty Storybook, aby slúžili verejnému adresáru.
"skripty": {
"rozprávková kniha": "rozprávková kniha -p 6006 -s ./verejné",
"zostaviť rozprávkovú knihu": "build-storybook -s public"
}
Prípadne upraviť ./storybook/main.js zahrnúť statický adresár, ktorý je v tomto prípade verejným priečinkom.
modul.exportov = {
// iné konfigurácie
"staticDirs": [ "../verejné" ],
}
Po obsluhe verejného adresára použite neoptimalizovanú podperu na obrázky Next.js používané v príbehoch.
Do .storybook/main.js pridajte nasledujúci kód:
importovať * ako ĎalšíObrázok od "ďalší/obrázok";
konšt OriginalNextImage = ĎalšíObrázok.predvolená;
Objekt.defineProperty (NextImage, "predvolená", {
konfigurovateľné: pravda,
hodnota: (rekvizity) => (
<Pôvodný Ďalší Obrázok
{...rekvizity}
neoptimalizované
/>
),
});
Tento kód používa neoptimalizovanú podperu všade, kde sa používa komponent obrazu.
Používanie Storybook v Next.js
Storybook je jedným z tých nástrojov, o ktorých si myslíte, že sú príliš únavné na používanie, ale keď ich začnete používať, uvedomíte si, o čo ste prišli. Pomocou Storybook môžete vytvárať a testovať rôzne komponenty bez toho, aby ste museli spustiť celú aplikáciu. Vďaka tomu je stavba komponentov od základu jednoduchá.
Ak používate Next.js, pred začatím sa uistite, že ste nakonfigurovali CSS a deoptimalizovali obrázky.
