Storybook är ett kraftfullt verktyg för att bygga UI-komponenter isolerat. Det hjälper dig att skapa och testa komponenter utan att köra hela applikationen.
Om du någonsin har använt Storybook med Next.js kommer du att märka att du måste konfigurera den för att hantera CSS och bilder korrekt. Processen kan vara frustrerande men dessa enkla steg hjälper dig att leda vägen.
Börja med att ställa in Next.js-projektet
Om du inte redan har ett Next.js-projekt inställt, följ tjänstemannen Next.js Komma igång-guide för att skapa ett nytt projekt.
Initiera sagobok
Kör följande kommando i terminalen för att initiera Storybook.
npx sb init --builder webpack5
Det här kommandot upptäcker projektet du arbetar med, installerar alla nödvändiga paket och skapar exempelberättelser.
Konfigurera CSS
Det första du behöver göra är att inkludera den globala CSS-filen i preview.js.
Ställ in globala stilar
De globala stilarna gäller för hela applikationen. För att tillämpa dessa stilar i berättelser kan du importera filen till enskilda berättelser och det skulle fungera. Men du skulle sluta skriva om importförklaringen över många berättelser eller till och med glömma det.
En bättre lösning är att importera de globala stilarna i .storybook/preview.js fil, en fil som innehåller alla delade konfigurationer för Storybook.
Inkludera följande importsats överst i .storybook/preview.js.
importera "../styles/globals.css";
Ställ in Sass för Storybook i Next.js
Som standard kommer Storybook inte med färdigt stöd för Sass förlängningsspråk. Du måste utöka webpack-konfigurationen genom att installera style-loader, css-loader och sass-loader.
npm i -D style-loader css-loader sass-loader
Så här gör dessa paket:
- style-loader injicerar CSS i DOM.
- css-loader tolkar @import och URL() som import/require och löser dem.
- sass-loader laddar SCSS till CSS.
För att konfigurera dessa paket, lägg till följande kod i .storybook/main.js:
konst väg = behöva('väg');
modul.exports = {
// andra konfigurationer
webpackFinal: asynkron (config) => {
config.module.rules.push(
{
testa: /\\.s(a|c)ss$/,
inkluderar: path.resolve (__dirname, '../'),
använda sig av: [
'style-loader',
{
loader: 'css-loader',
alternativ: {
moduler: {
bil: Sann,
localIdentName: '[namn]__[lokal]--[hash: base64:5]',
},
},
},
'sass-loader'
],
},
);
lämna tillbaka config;
}
}
Efter detta bör Sass vara tillgänglig i Storybook.
Använd det ooptimerade stödet på Next.js-bilder
Next.js har många optimeringsfunktioner. En av dem är bildoptimering genom bildkomponenten som gör att bilder laddas snabbare och anpassas till skärmen. Det är dock jobbigt att arbeta med i Storybook eftersom Storybook körs isolerat från Next.js-miljön. Det är bättre att avoptimera bilder i berättelser.
För att börja måste du betjäna den offentliga katalogen i Storybook för att indikera var bilderna finns. Du kan göra det i npm-skript karta i package.json fil eller in .storybook/main.js.
I package.json, uppdatera Storybook-skripten för att tjäna den offentliga katalogen.
"skript": {
"sagobok": "start-sagobok -p 6006 -s ./public",
"bygg-sagobok": "bygg-sagobok -s offentliga"
}
Alternativt, modifiera ./storybook/main.js att inkludera den statiska katalogen som i det här fallet är den allmänna mappen.
modul.export = {
// andra konfigurationer
"staticDirs": [ "../offentlig" ],
}
Efter att ha serverat den offentliga katalogen, applicera den ooptimerade rekvisiten på Next.js-bilderna som används i berättelser.
Lägg till följande kod i .storybook/main.js:
importera * som Nästa bild från "nästa/bild";
konst OriginalNextImage = NextImage.standard;
Objekt.defineProperty (NextImage, "standard", {
konfigurerbar: Sann,
värde: (rekvisita) => (
<OriginalNextImage
{...rekvisita}
Inte optimerad
/>
),
});
Den här koden använder den ooptimerade rekvisiten överallt där bildkomponenten används.
Använda Storybook i Next.js
Storybook är ett av de verktyg du tycker är för tråkiga att använda men när du väl börjar använda dem inser du vad du saknade. Med Storybook kan du skapa och testa olika komponenter utan att köra hela din applikation. Det gör därför byggkomponenter från grunden enkla.
Om du använder Next.js, se till att du konfigurerar CSS och avoptimerar bilder innan du börjar.
