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.

instagram viewer

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.