Storybook este un instrument puternic pentru construirea de componente UI în mod izolat. Vă ajută să creați și să testați componente fără a rula întreaga aplicație.

Dacă ați folosit vreodată Storybook cu Next.js, veți observa că trebuie să îl configurați pentru a gestiona corect CSS și imaginile. Procesul poate fi frustrant, dar acești pași simpli vor ajuta la deschiderea drumului.

Începeți prin a configura proiectul Next.js

Dacă nu aveți deja un proiect Next.js configurat, urmați oficialul Next.js Ghid introductiv pentru a crea un nou proiect.

Inițializați cartea de povești

Rulați următoarea comandă în terminal pentru a inițializa Storybook.

npx sb init --builder webpack5

Această comandă detectează proiectul la care lucrați, instalează toate pachetele necesare și creează exemple de povești.

Configurați CSS

Primul lucru pe care trebuie să-l faceți este să includeți fișierul CSS global în preview.js.

Configurați stiluri globale

Stilurile globale se aplică în întreaga aplicație. Pentru a aplica aceste stiluri în povești, ați putea importa fișierul în povești individuale și asta ar funcționa. Cu toate acestea, veți ajunge să rescrieți declarația de import în multe povești sau chiar să uitați.

instagram viewer

O soluție mai bună este să importați stilurile globale în fișierul .carte de povești/preview.js fișier, un fișier care conține toate configurațiile partajate pentru Storybook.

În partea de sus a .storybook/preview.js, includeți următoarea declarație de import.

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

Configurați Sass pentru Storybook în Next.js

În mod implicit, Storybook nu vine cu suport complet pentru Limbajul extensiei Sass. Trebuie să extindeți configurația webpack instalând style-loader, css-loader și sass-loader.

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

Iată ce fac aceste pachete:

  • style-loader injectează CSS în DOM.
  • css-loader interpretează @import și URL() ca import/require și le rezolvă.
  • sass-loader încarcă SCSS în CSS.

Pentru a configura aceste pachete, adăugați următorul cod în .storybook/main.js:

const cale = cere('cale');
modul.exports = {
// alte configurații
 webpackFinal: asincron (config) => {
 config.module.rules.push(
 {
 Test: /\\.s(a|c)ss$/,
 include: path.resolve (__dirname, '../'),
 utilizare: [
 „încărcător de stil”,
 {
 încărcător: „css-loader”,
 Opțiuni: {
 module: {
 auto: Adevărat,
 localIdentName: „[nume]__[local]--[hash: base64:5]',
 },
 },
 },
 „încărcător sas”
 ],
 },
 );
întoarcere config;
 }
}

După aceasta, Sass ar trebui să fie disponibil în Storybook.

Aplicați prop neoptimizat la imaginile Next.js

Next.js are multe funcții de optimizare. Una dintre ele este optimizarea imaginii prin componenta imagine care face ca imaginile să se încarce mai rapid și să se adapteze la ecran. Cu toate acestea, este dificil să lucrezi în Storybook, deoarece Storybook rulează izolat de mediul Next.js. Este mai bine să deoptimizați imaginile din povești.

Pentru a începe, trebuie să serviți directorul public în Storybook pentru a indica unde se află imaginile. O poți face în scripturi npm harta în pachet.json fișier sau în .storybook/main.js.

În pachet.json, actualizați scripturile Storybook pentru a servi directorul public.

"scenarii": {
"carte de povești": "start-storybook -p 6006 -s ./public",
"construi-cartea de povești": "build-storybook -s public"
}

Alternativ, modificați ./storybook/main.js să includă directorul static care, în acest caz, este folderul public.

modul.exporturi = {
// alte configurații
"staticDirs": [ "../public" ],
}

După ce difuzați directorul public, aplicați suportul neoptimizat imaginilor Next.js utilizate în povești.

În .storybook/main.js, adăugați următorul cod:

import * la fel de NextImage din „următorul/imaginea”;
const OriginalNextImage = NextImage.Mod implicit;
Obiect.defineProperty (Imagine următoare, "Mod implicit", {
 configurabil: Adevărat,
 valoare: (recuzită) => (
<OriginalNextImage
 {...recuzită}
 neoptimizat
 />
 ),
});

Acest cod folosește suportul neoptimizat oriunde este folosită componenta imagine.

Utilizarea Storybook în Next.js

Cartea de povești este unul dintre acele instrumente pe care le considerați prea obositoare pentru a le folosi, dar odată ce începeți să le utilizați, vă dați seama ce vă lipsește. Cu Storybook, puteți crea și testa diferite componente fără a rula întreaga aplicație. Prin urmare, construirea componentelor de la zero este simplă.

Dacă utilizați Next.js, asigurați-vă că configurați CSS-ul și dezoptimizați imaginile înainte de a începe.