Storybook ist ein leistungsstarkes Tool zum isolierten Erstellen von UI-Komponenten. Es hilft Ihnen, Komponenten zu erstellen und zu testen, ohne die gesamte Anwendung auszuführen.
Wenn Sie Storybook jemals mit Next.js verwendet haben, werden Sie feststellen, dass Sie es konfigurieren müssen, um CSS und Bilder richtig zu verarbeiten. Der Prozess kann frustrierend sein, aber diese einfachen Schritte werden Ihnen dabei helfen, den Weg zu weisen.
Beginnen Sie mit dem Einrichten des Next.js-Projekts
Wenn Sie noch kein Next.js-Projekt eingerichtet haben, folgen Sie dem offiziellen Next.js Erste Schritte zum Erstellen eines neuen Projekts.
Storybook initialisieren
Führen Sie den folgenden Befehl im Terminal aus, um Storybook zu initialisieren.
npx sb init --builder webpack5
Dieser Befehl erkennt das Projekt, an dem Sie arbeiten, installiert alle erforderlichen Pakete und erstellt Beispielstorys.
CSS einrichten
Als erstes müssen Sie die globale CSS-Datei in preview.js einbinden.
Richten Sie globale Stile ein
Die globalen Stile gelten für die gesamte Anwendung. Um diese Stile in Geschichten anzuwenden, könnten Sie die Datei in einzelne Geschichten importieren, und das würde funktionieren. Am Ende würden Sie jedoch die Import-Anweisung über viele Geschichten hinweg neu schreiben oder es sogar vergessen.
Eine bessere Lösung besteht darin, die globalen Stile in die .storybook/preview.js Datei, eine Datei, die alle gemeinsam genutzten Konfigurationen für Storybook enthält.
Fügen Sie oben in .storybook/preview.js die folgende import-Anweisung ein.
importieren "../styles/globals.css";
Richten Sie Sass für Storybook in Next.js ein
Standardmäßig bietet Storybook keine vorkonfigurierte Unterstützung für die Sass-Erweiterungssprache. Sie müssen die Webpack-Konfiguration erweitern, indem Sie style-loader, css-loader und sass-loader installieren.
npm i -D Style-Loader CSS-Loader Sass-Loader
Folgendes tun diese Pakete:
- style-loader fügt CSS in das DOM ein.
- css-loader interpretiert @import und URL() wie import/require und löst sie auf.
- sass-loader lädt SCSS in CSS.
Um diese Pakete zu konfigurieren, fügen Sie den folgenden Code in .storybook/main.js hinzu:
konst Pfad = erfordern('Weg');
Modul.exporte = {
// andere Konfigurationen
webpackFinal: asynchron (Konfiguration) => {
config.module.rules.push(
{
prüfen: /\\.s(a|c)ss$/,
umfassen: path.resolve (__dirname, '../'),
verwenden: [
'Style-Loader',
{
Lader: 'css-Loader',
Optionen: {
Module: {
Auto: WAHR,
localIdentName: '[name]__[lokal]--[hash: base64:5]',
},
},
},
'sass-loader'
],
},
);
zurückkehren Konfiguration;
}
}
Danach sollte Sass in Storybook verfügbar sein.
Wenden Sie die nicht optimierte Prop auf Next.js-Images an
Next.js hat viele Optimierungsfunktionen. Eine davon ist die Bildoptimierung durch die Bildkomponente, die dafür sorgt, dass Bilder schneller geladen und an den Bildschirm angepasst werden. Es ist jedoch mühsam, damit in Storybook zu arbeiten, da Storybook isoliert von der Next.js-Umgebung ausgeführt wird. Es ist besser, Bilder in Geschichten zu de-optimieren.
Zunächst müssen Sie das öffentliche Verzeichnis in Storybook bedienen, um anzugeben, wo sich die Bilder befinden. Sie können es in der npm-Skripte Karte im Paket.json Datei oder in .storybook/main.js.
In Paket.json, aktualisieren Sie die Storybook-Skripts, um das öffentliche Verzeichnis bereitzustellen.
"Skripte": {
"Märchenbuch": "start-storybook -p 6006 -s ./public",
"Bau-Geschichtenbuch": "build-storybook -s öffentlich"
}
Alternativ ändern ./storybook/main.js um das statische Verzeichnis einzuschließen, das in diesem Fall der öffentliche Ordner ist.
Modul.Exporte = {
// andere Konfigurationen
"staticDirs": [ "../öffentlich" ],
}
Wenden Sie nach dem Bereitstellen des öffentlichen Verzeichnisses die nicht optimierte Prop auf die Next.js-Bilder an, die in Storys verwendet werden.
Fügen Sie in .storybook/main.js den folgenden Code hinzu:
importieren * als NächstesBild aus "weiter/Bild";
konst UrsprünglichesNächstesBild = NächstesBild.Standard;
Objekt.defineProperty (NächstesBild, "Standard", {
konfigurierbar: WAHR,
Wert: (Requisiten) => (
<OriginalNächstesBild
{...Requisiten}
nicht optimiert
/>
),
});
Dieser Code verwendet die nicht optimierte Requisite überall dort, wo die Bildkomponente verwendet wird.
Verwenden von Storybook in Next.js
Storybook ist eines dieser Tools, von denen Sie denken, dass sie zu mühsam zu verwenden sind, aber sobald Sie anfangen, sie zu verwenden, erkennen Sie, was Ihnen gefehlt hat. Mit Storybook können Sie verschiedene Komponenten erstellen und testen, ohne Ihre gesamte Anwendung auszuführen. Es macht daher Bauteile von Grund auf einfach.
Wenn Sie Next.js verwenden, stellen Sie sicher, dass Sie das CSS konfigurieren und die Bilder deoptimieren, bevor Sie beginnen.
