Storybook to potężne narzędzie do budowania komponentów interfejsu użytkownika w izolacji. Pomaga tworzyć i testować komponenty bez uruchamiania całej aplikacji.

Jeśli kiedykolwiek używałeś Storybook z Next.js, zauważysz, że musisz go skonfigurować, aby poprawnie obsługiwał CSS i obrazy. Proces ten może być frustrujący, ale te proste kroki pomogą wskazać drogę.

Zacznij od skonfigurowania projektu Next.js

Jeśli nie masz jeszcze skonfigurowanego projektu Next.js, postępuj zgodnie z oficjalnymi instrukcjami Następny.js Przewodnik Pierwsze kroki dotyczący tworzenia nowego projektu.

Zainicjuj Storybook

Uruchom następujące polecenie w terminalu, aby zainicjować Storybook.

npx sb init --konstruktor webpack5

To polecenie wykrywa projekt, nad którym pracujesz, instaluje wszystkie niezbędne pakiety i tworzy przykładowe historie.

Skonfiguruj CSS

Pierwszą rzeczą, którą musisz zrobić, to dołączyć globalny plik CSS do pliku preview.js.

Skonfiguruj style globalne

Style globalne obowiązują w całej aplikacji. Aby zastosować te style w historiach, możesz zaimportować plik do poszczególnych historii i to zadziała. Jednak skończyłoby się to przepisaniem instrukcji importu w wielu historiach lub nawet zapomnieniem.

instagram viewer

Lepszym rozwiązaniem jest zaimportowanie globalnych stylów w pliku .książeczka/podgląd.js plik, plik, który zawiera wszystkie wspólne konfiguracje dla Storybook.

U góry pliku .storybook/preview.js umieść następującą instrukcję importu.

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

Skonfiguruj Sass dla Storybook w Next.js

Domyślnie Storybook nie jest dostarczany z gotową obsługą dla Język rozszerzenia Sass. Musisz rozszerzyć konfigurację webpacka, instalując style-loader, css-loader i sass-loader.

npm i -D moduł ładujący style moduł ładujący css moduł ładujący sass

Oto, co robią te pakiety:

  • style-loader wstrzykuje CSS do DOM.
  • css-loader interpretuje @import i URL() jak import/require i rozwiązuje je.
  • sass-loader ładuje SCSS do CSS.

Aby skonfigurować te pakiety, dodaj następujący kod w .storybook/main.js:

konst ścieżka = wymagać('ścieżka');
moduł.eksport = {
// inne konfiguracje
 webpackFinal: asynchroniczny (konfiguracja) => {
 config.module.rules.push(
 {
 test: /\\.s(a|c)ss$/,
 zawierać: path.resolve (__nazwa_katalogu, '../'),
 używać: [
 „moduł ładujący styl”,
 {
 program ładujący: 'css-loader',
 opcje: {
 moduły: {
 automatyczny: PRAWDA,
 localIdentName: '[nazwa]__[lokalny]--[hash: base64:5]',
 },
 },
 },
 „bezczelny ładowacz”
 ],
 },
 );
powrót konfiguracja;
 }
}

Następnie Sass powinien być dostępny w Storybook.

Zastosuj niezoptymalizowany rekwizyt do obrazów Next.js

Next.js ma wiele funkcji optymalizacyjnych. Jednym z nich jest optymalizacja obrazu poprzez komponent image, który sprawia, że ​​obrazy ładują się szybciej i dopasowują do ekranu. Praca w Storybook jest jednak uciążliwa, ponieważ Storybook działa w izolacji od środowiska Next.js. Lepiej zdezoptymalizować obrazy w relacjach.

Aby rozpocząć, musisz udostępnić katalog publiczny w Storybook, aby wskazać, gdzie znajdują się obrazy. Możesz to zrobić w skrypty npm mapa w pakiet.json plik lub w .storybook/main.js.

W pakiet.json, zaktualizuj skrypty Storybook, aby obsługiwały katalog publiczny.

"skrypty": {
"książeczka": "start-storybook -p 6006 -s ./public",
"książeczka do budowania": "build-storybook -s public"
}

Ewentualnie zmodyfikuj ./storybook/main.js aby dołączyć katalog statyczny, który w tym przypadku jest folderem publicznym.

moduł.eksport = {
// inne konfiguracje
"staticDirs": [ "../publiczny" ],
}

Po udostępnieniu katalogu publicznego zastosuj niezoptymalizowany rekwizyt do obrazów Next.js używanych w relacjach.

W .storybook/main.js dodaj następujący kod:

import * Jak Następny obraz z "następny/obraz";
konst Oryginalny następny obraz = następny obraz.domyślny;
Obiekt.defineProperty (NextImage, "domyślny", {
 konfigurowalny: PRAWDA,
 wartość: (rekwizyty) => (
<Oryginalny następny obraz
 {...rekwizyty}
 niezoptymalizowany
 />
 ),
});

Ten kod używa niezoptymalizowanego rekwizytu wszędzie tam, gdzie używany jest komponent obrazu.

Używanie Storybook w Next.js

Storybook to jedno z tych narzędzi, które Twoim zdaniem są zbyt uciążliwe w użyciu, ale kiedy już zaczniesz z nich korzystać, zdasz sobie sprawę, czego Ci brakowało. Dzięki Storybook możesz tworzyć i testować różne komponenty bez uruchamiania całej aplikacji. Dzięki temu budowanie komponentów od podstaw jest proste.

Jeśli używasz Next.js, przed rozpoczęciem upewnij się, że skonfigurowałeś CSS i zdezoptymalizowałeś obrazy.