Storybook is een krachtige tool voor het afzonderlijk bouwen van UI-componenten. Het helpt u bij het maken en testen van componenten zonder de hele applicatie uit te voeren.

Als je ooit Storybook met Next.js hebt gebruikt, zul je merken dat je het moet configureren om CSS en afbeeldingen correct te verwerken. Het proces kan frustrerend zijn, maar deze eenvoudige stappen helpen u op weg.

Begin met het instellen van het Next.js-project

Als je nog geen Next.js-project hebt opgezet, volg dan de officiële Volgende.js Handleiding Aan de slag om een ​​nieuw project te maken.

Initialiseer Verhalenboek

Voer de volgende opdracht uit in de terminal om Storybook te initialiseren.

npx sb init --bouwer webpack5

Deze opdracht detecteert het project waaraan u werkt, installeert alle benodigde pakketten en maakt voorbeeldverhalen.

CSS instellen

Het eerste dat u hoeft te doen, is het globale CSS-bestand opnemen in preview.js.

Globale stijlen instellen

De globale stijlen gelden voor de hele applicatie. Om deze stijlen in verhalen toe te passen, zou je het bestand in individuele verhalen kunnen importeren en dat zou werken. U zou echter uiteindelijk de importverklaring in veel verhalen herschrijven of zelfs vergeten.

Een betere oplossing is om de globale stijlen in het .verhalenboek/preview.js bestand, een bestand dat alle gedeelde configuraties voor Storybook bevat.

Voeg bovenaan .storybook/preview.js de volgende importverklaring toe.

importeren "../styles/globals.css";

Stel Sass in voor Storybook in Next.js

Storybook wordt standaard niet geleverd met out-of-the-box ondersteuning voor de Sass uitbreidingstaal. U moet de webpack-configuratie uitbreiden door style-loader, css-loader en sass-loader te installeren.

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

Dit is wat deze pakketten doen:

  • style-loader injecteert CSS in de DOM.
  • css-loader interpreteert @import en URL() zoals import/require en lost ze op.
  • sass-loader laadt SCSS in CSS.

Om deze pakketten te configureren, voegt u de volgende code toe in .storybook/main.js:

const pad = vereisen('pad');
moduul.export = {
// andere configuraties
 webpack Finale: asynchroon (configuratie) => {
 config.module.regels.push(
 {
 test: /\\.s(a|c)ss$/,
 omvatten: path.resolve (__dirname, '../'),
 gebruik: [
 'stijllader',
 {
 lader: 'css-lader',
 opties: {
 modules: {
 auto: WAAR,
 localIdentName: '[naam]__[lokaal]--[hash: base64:5]',
 },
 },
 },
 'sass-lader'
 ],
 },
 );
opbrengst configuratie;
 }
}

Hierna zou Sass beschikbaar moeten zijn in Storybook.

Pas de niet-geoptimaliseerde prop toe op Next.js-afbeeldingen

Next.js heeft veel optimalisatiefuncties. Een daarvan is beeldoptimalisatie door middel van de afbeeldingscomponent waardoor afbeeldingen sneller laden en zich aanpassen aan het scherm. Het is echter lastig om in Storybook te werken, aangezien Storybook geïsoleerd van de Next.js-omgeving draait. Het is beter om afbeeldingen in verhalen te de-optimaliseren.

Om te beginnen moet u de openbare map in Storybook bedienen om aan te geven waar de afbeeldingen zich bevinden. Dat kan in de npm-scripts kaart in de pakket.json bestand of in .storybook/main.js.

In pakket.json, werk de Storybook-scripts bij om de openbare directory te bedienen.

"scripts": {
"verhalenboek": "start-verhalenboek -p 6006 -s ./public",
"bouw-verhalenboek": "build-storybook -s openbaar"
}

Alternatief wijzigen ./verhalenboek/main.js om de statische map op te nemen, in dit geval de openbare map.

moduul.export = {
// andere configuraties
"statische Dirs": [ "../openbaar" ],
}

Pas na het bedienen van de openbare directory de niet-geoptimaliseerde prop toe op de Next.js-afbeeldingen die in verhalen worden gebruikt.

Voeg in .storybook/main.js de volgende code toe:

importeren * als Volgende afbeelding van "volgende/afbeelding";
const OorspronkelijkVolgendeAfbeelding = VolgendeAfbeelding.standaard;
Voorwerp.defineProperty (NextImage, "standaard", {
 configureerbaar: WAAR,
 waarde: (rekwisieten) => (
<OriginalNextImage
 {...rekwisieten}
 niet geoptimaliseerd
 />
 ),
});

Deze code gebruikt de niet-geoptimaliseerde prop overal waar de afbeeldingscomponent wordt gebruikt.

Storybook gebruiken in Next.js

Storybook is een van die tools waarvan je denkt dat ze te vervelend zijn om te gebruiken, maar als je ze eenmaal gaat gebruiken, realiseer je je wat je miste. Met Storybook kunt u verschillende componenten maken en testen zonder uw hele applicatie uit te voeren. Het maakt het bouwen van componenten vanaf de basis eenvoudig.

Als u Next.js gebruikt, zorg er dan voor dat u de CSS configureert en afbeeldingen de-optimaliseert voordat u aan de slag gaat.