Storybook je výkonný nástroj pro vytváření komponent uživatelského rozhraní v izolaci. Pomáhá vám vytvářet a testovat komponenty bez spuštění celé aplikace.
Pokud jste někdy používali Storybook s Next.js, všimnete si, že jej musíte nakonfigurovat, aby správně zpracovával CSS a obrázky. Tento proces může být frustrující, ale tyto jednoduché kroky vám pomohou vést cestu.
Začněte nastavením projektu Next.js
Pokud ještě nemáte nastavený projekt Next.js, postupujte podle oficiálních Next.js Průvodce Začínáme k vytvoření nového projektu.
Inicializovat Storybook
Spuštěním následujícího příkazu v terminálu inicializujte Storybook.
npx sb init --Builder webpack5
Tento příkaz detekuje projekt, na kterém pracujete, nainstaluje všechny potřebné balíčky a vytvoří ukázkové příběhy.
Nastavit CSS
První věc, kterou musíte udělat, je zahrnout globální soubor CSS do preview.js.
Nastavit globální styly
Globální styly platí pro celou aplikaci. Chcete-li použít tyto styly v článcích, můžete importovat soubor do jednotlivých článků a to by fungovalo. Nakonec byste však přepsali příkaz o importu v mnoha příbězích nebo na to dokonce zapomněli.
Lepším řešením je importovat globální styly do souboru .storybook/preview.js file, soubor, který obsahuje všechny sdílené konfigurace pro Storybook.
V horní části .storybook/preview.js zahrňte následující příkaz k importu.
import "../styles/globals.css";
Nastavte Sass pro Storybook v Next.js
Ve výchozím nastavení Storybook nepřichází s přímou podporou pro Jazyk rozšíření Sass. Je třeba rozšířit konfiguraci webpacku instalací style-loader, css-loader a sass-loader.
npm i -D style-loader css-loader sass-loader
Co tyto balíčky dělají:
- style-loader vloží CSS do DOM.
- css-loader interpretuje @import a URL() jako import/require a řeší je.
- sass-loader načte SCSS do CSS.
Chcete-li tyto balíčky nakonfigurovat, přidejte do .storybook/main.js následující kód:
konst cesta = vyžadovat('cesta');
modul.exports = {
// další konfigurace
webpackFinal: asynchronní (config) => {
config.module.rules.push(
{
test: /\\.s(a|c)ss$/,
zahrnout: path.resolve (__dirname, '../'),
použití: [
'style-loader',
{
loader: 'css-loader',
možnosti: {
moduly: {
auto: skutečný,
localIdentName: '[jméno]__[místní]--[hash: base64:5]',
},
},
},
'sass-loader'
],
},
);
vrátit se config;
}
}
Poté by měl být Sass dostupný v Storybook.
Použijte Unoptimized Prop na obrázky Next.js
Next.js má mnoho optimalizačních funkcí. Jednou z nich je optimalizace obrazu pomocí obrazové složky, která umožňuje rychlejší načítání a přizpůsobení obrazu obrazovce. Práce s touto knihou je však pracná, protože Storybook běží izolovaně od prostředí Next.js. Obrázky v příbězích je lepší deoptimalizovat.
Chcete-li začít, musíte obsloužit veřejný adresář v Storybook, abyste uvedli, kde se obrázky nacházejí. Můžete to udělat v skripty npm mapa v package.json souboru nebo v .storybook/main.js.
v package.json, aktualizujte skripty Storybook, aby sloužily veřejnému adresáři.
"skripty": {
"pohádková kniha": "začátečnická kniha -p 6006 -s ./veřejné",
"stavět-pohádková kniha": "build-storybook -s public"
}
Případně upravit ./storybook/main.js zahrnout statický adresář, což je v tomto případě veřejná složka.
modul.exportů = {
// další konfigurace
"staticDirs": [ "../veřejnost" ],
}
Po obsloužení veřejného adresáře použijte neoptimalizovanou podpěru na obrázky Next.js používané v příbězích.
Do .storybook/main.js přidejte následující kód:
import * tak jako DalšíObrázek z "další/obrázek";
konst OriginalNextImage = NextImage.výchozí;
Objekt.defineProperty (NextImage, "výchozí", {
konfigurovatelné: skutečný,
hodnota: (rekvizity) => (
<PůvodníDalší Obrázek
{...rekvizity}
neoptimalizované
/>
),
});
Tento kód používá neoptimalizovanou podpěru všude, kde se používá komponenta obrazu.
Použití Storybook v Next.js
Storybook je jedním z těch nástrojů, o kterých si myslíte, že jsou příliš zdlouhavé, ale jakmile je začnete používat, uvědomíte si, o co jste přišli. S Storybook můžete vytvářet a testovat různé komponenty, aniž byste museli spouštět celou aplikaci. Díky tomu je stavba komponent od základu jednoduchá.
Pokud používáte Next.js, ujistěte se, že jste nakonfigurovali CSS a deoptimalizovali obrázky, než začnete.