Storybook è un potente strumento per la creazione di componenti dell'interfaccia utente in isolamento. Ti aiuta a creare e testare componenti senza eseguire l'intera applicazione.
Se hai mai utilizzato Storybook con Next.js, noterai che devi configurarlo per gestire correttamente CSS e immagini. Il processo può essere frustrante, ma questi semplici passaggi ti aiuteranno ad aprire la strada.
Inizia configurando il progetto Next.js
Se non hai già impostato un progetto Next.js, segui il funzionario Next.js Guida introduttiva per creare un nuovo progetto.
Inizializza Storybook
Eseguire il seguente comando nel terminale per inizializzare Storybook.
npx sb init --builder webpack5
Questo comando rileva il progetto su cui stai lavorando, installa tutti i pacchetti necessari e crea storie di esempio.
Imposta CSS
La prima cosa che devi fare è includere il file CSS globale in preview.js.
Imposta gli stili globali
Gli stili globali si applicano all'intera applicazione. Per applicare questi stili nelle storie, puoi importare il file in singole storie e funzionerebbe. Tuttavia, finiresti per riscrivere la dichiarazione di importazione in molte storie o addirittura per dimenticartene.
Una soluzione migliore consiste nell'importare gli stili globali nel file .libro di fiabe/anteprima.js file, un file che contiene tutte le configurazioni condivise per Storybook.
Nella parte superiore di .storybook/preview.js, includi la seguente dichiarazione di importazione.
importare "../styles/globals.css";
Configura Sass per Storybook in Next.js
Per impostazione predefinita, Storybook non viene fornito con il supporto predefinito per il Estensione del linguaggio Sass. Devi estendere la configurazione del webpack installando style-loader, css-loader e sass-loader.
npm i -D style-loader css-loader sass-loader
Ecco cosa fanno questi pacchetti:
- style-loader inserisce CSS nel DOM.
- css-loader interpreta @import e URL() come import/require e li risolve.
- sass-loader carica SCSS in CSS.
Per configurare questi pacchetti, aggiungi il seguente codice in .storybook/main.js:
cost percorso = richiedere('sentiero');
modulo.esporta = {
// altre configurazioni
webpackFinale: asincrono (config) => {
config.module.rules.push(
{
test: /\\.s(a|c)ss$/,
include: path.resolve (__dirname, '../'),
utilizzo: [
'caricatore di stile',
{
caricatore: 'caricatore css',
opzioni: {
moduli: {
auto: VERO,
localIdentName: '[nome]__[locale]--[hash: base64:5]',
},
},
},
'caricatore di ass'
],
},
);
ritorno configurazione;
}
}
Dopo questo, Sass dovrebbe essere disponibile in Storybook.
Applica la proprietà non ottimizzata alle immagini Next.js
Next.js ha molte funzioni di ottimizzazione. Uno di questi è l'ottimizzazione dell'immagine attraverso il componente immagine che rende le immagini caricate più velocemente e si adattano allo schermo. È, tuttavia, un problema lavorare con Storybook poiché Storybook viene eseguito in isolamento dall'ambiente Next.js. È meglio de-ottimizzare le immagini nelle storie.
Per iniziare, devi servire la directory pubblica in Storybook per indicare dove si trovano le immagini. Puoi farlo nel script npm mappa nel pacchetto.json file o in .storybook/main.js.
In pacchetto.json, aggiornare gli script Storybook per servire la directory pubblica.
"script": {
"libro di storia": "start-racconto -p 6006 -s ./public",
"build-racconto": "build-storybook -s public"
}
In alternativa, modifica ./racconto/main.js per includere la directory statica che, in questo caso, è la cartella pubblica.
modulo.esportazioni = {
// altre configurazioni
"staticDirs": [ "../pubblico" ],
}
Dopo aver pubblicato la directory pubblica, applica l'elica non ottimizzata alle immagini Next.js utilizzate nelle storie.
In .storybook/main.js, aggiungi il seguente codice:
importare * COME NextImage da "successiva/immagine";
cost OriginalNextImage = NextImage.predefinito;
Oggetto.defineProperty (NextImage, "predefinito", {
configurabile: VERO,
valore: (oggetti di scena) => (
<OriginalNextImage
{...oggetti di scena}
non ottimizzato
/>
),
});
Questo codice utilizza l'elica non ottimizzata ovunque venga utilizzato il componente immagine.
Utilizzo di Storybook in Next.js
Storybook è uno di quegli strumenti che pensi siano troppo noiosi da usare ma una volta che inizi a usarli, ti rendi conto di cosa ti stavi perdendo. Con Storybook, puoi creare e testare diversi componenti senza eseguire l'intera applicazione. Pertanto, semplifica la costruzione di componenti da zero.
Se utilizzi Next.js, assicurati di configurare il CSS e di de-ottimizzare le immagini prima di iniziare.