Πώς να ρυθμίσετε το Storybook για ένα έργο Next.js

Το Storybook είναι ένα ισχυρό εργαλείο για τη δημιουργία στοιχείων διεπαφής χρήστη μεμονωμένα. Σας βοηθά να δημιουργήσετε και να δοκιμάσετε στοιχεία χωρίς να εκτελείτε ολόκληρη την εφαρμογή.

Εάν έχετε χρησιμοποιήσει ποτέ το Storybook με το Next.js, θα παρατηρήσετε ότι πρέπει να το διαμορφώσετε ώστε να χειρίζεται σωστά το CSS και τις εικόνες. Η διαδικασία μπορεί να είναι απογοητευτική, αλλά αυτά τα απλά βήματα θα σας βοηθήσουν να προχωρήσετε.

Ξεκινήστε με τη ρύθμιση του έργου Next.js

Εάν δεν έχετε ήδη ρυθμίσει ένα έργο Next.js, ακολουθήστε το επίσημο Επόμενο.js Οδηγός έναρξης για τη δημιουργία ενός νέου έργου.

Αρχικοποίηση βιβλίου ιστοριών

Εκτελέστε την ακόλουθη εντολή στο τερματικό για να αρχικοποιήσετε το Storybook.

npx sb init --κατασκευαστής webpack5

Αυτή η εντολή εντοπίζει το έργο στο οποίο εργάζεστε, εγκαθιστά όλα τα απαραίτητα πακέτα και δημιουργεί παραδείγματα ιστοριών.

Ρύθμιση CSS

Το πρώτο πράγμα που πρέπει να κάνετε είναι να συμπεριλάβετε το καθολικό αρχείο CSS στο preview.js.

Ρύθμιση καθολικών στυλ

Τα καθολικά στυλ ισχύουν σε ολόκληρη την εφαρμογή. Για να εφαρμόσετε αυτά τα στυλ σε ιστορίες, θα μπορούσατε να εισαγάγετε το αρχείο σε μεμονωμένες ιστορίες και αυτό θα λειτουργούσε. Ωστόσο, θα καταλήξετε να ξαναγράψετε τη δήλωση εισαγωγής σε πολλές ιστορίες ή ακόμα και να το ξεχάσετε.

Μια καλύτερη λύση είναι να εισαγάγετε τα καθολικά στυλ στο .storybook/preview.js αρχείο, ένα αρχείο που περιέχει όλες τις κοινόχρηστες διαμορφώσεις για το Storybook.

Στην κορυφή του .storybook/preview.js, συμπεριλάβετε την ακόλουθη δήλωση εισαγωγής.

εισαγωγή "../styles/globals.css";

Ρύθμιση Sass για Storybook στο Next.js

Από προεπιλογή, το Storybook δεν συνοδεύεται από άμεση υποστήριξη για το Γλώσσα επέκτασης Sass. Πρέπει να επεκτείνετε τη διαμόρφωση του πακέτου web εγκαθιστώντας style-loader, css-loader και sass-loader.

npm i -D style-loader css-loader sass-loader

Δείτε τι κάνουν αυτά τα πακέτα:

• Το style-loader εισάγει το CSS στο DOM.
• Το css-loader ερμηνεύει το @import και το URL() όπως το import/require και τα επιλύει.
• Το sass-loader φορτώνει το SCSS στο CSS.

Για να διαμορφώσετε αυτά τα πακέτα, προσθέστε τον ακόλουθο κώδικα στο .storybook/main.js:

συνθ μονοπάτι = απαιτώ('μονοπάτι');
μονάδα μέτρησης.εξαγωγές = {
// άλλες διαμορφώσεις
 webpackFinal: ασυγχρονισμός (config) => {
 config.module.rules.push(
 {
 δοκιμή: /\\.s(a|c)ss$/,
 περιλαμβάνουν: path.resolve (__dirname, '../'),
 χρήση: [
 'style-loader',
 {
 loader: 'css-loader',
 επιλογές: {
 ενότητες: {
 αυτο: αληθής,
 localIdentName: '[όνομα]__[τοπικό]--[κατακερματισμός: base64:5]',
 },
 },
 },
 'sass-loader'
 ],
 },
 );
ΕΠΙΣΤΡΟΦΗ config;
 }
}

Μετά από αυτό, το Sass θα πρέπει να είναι διαθέσιμο στο Storybook.

Εφαρμόστε το Unoptimized Prop στις Εικόνες Next.js

Το Next.js έχει πολλές δυνατότητες βελτιστοποίησης. Ένα από αυτά είναι η βελτιστοποίηση εικόνας μέσω του στοιχείου εικόνας που κάνει τις εικόνες να φορτώνουν πιο γρήγορα και να προσαρμόζονται στην οθόνη. Ωστόσο, είναι δύσκολο να δουλεύεις στο Storybook, καθώς το Storybook εκτελείται μεμονωμένα από το περιβάλλον Next.js. Είναι καλύτερο να απο-βελτιστοποιήσετε τις εικόνες στις ιστορίες.

Για να ξεκινήσετε, πρέπει να εμφανίσετε τον δημόσιο κατάλογο στο Storybook για να υποδείξετε πού βρίσκονται οι εικόνες. Μπορείτε να το κάνετε στο npm σενάρια χάρτης στο πακέτο.json αρχείο ή μέσα .storybook/main.js.

Σε πακέτο.json, ενημερώστε τα σενάρια του Storybook για να εξυπηρετούν τον δημόσιο κατάλογο.

"σενάρια": {
"βιβλίο με παραμύθια": "start-storybook -p 6006 -s ./public",
"build-storybook": "build-storybook -s public"
}

Εναλλακτικά, τροποποιήστε ./storybook/main.js για να συμπεριλάβετε τον στατικό κατάλογο που, σε αυτήν την περίπτωση, είναι ο δημόσιος φάκελος.

μονάδα μέτρησης.εξαγωγές = {
// άλλες διαμορφώσεις
"staticDirs": [ "../δημόσιο" ],
}

Μετά την προβολή του δημόσιου καταλόγου, εφαρμόστε το μη βελτιστοποιημένο στηρίγματα στις εικόνες Next.js που χρησιμοποιούνται στις ιστορίες.

Στο .storybook/main.js, προσθέστε τον ακόλουθο κώδικα:

εισαγωγή * όπως και ΕπόμενηΕικόνα από "επόμενη/εικόνα";
συνθ OriginalNextImage = Επόμενη Εικόνα.Προκαθορισμένο;
Αντικείμενο.defineProperty (NextImage, "Προκαθορισμένο", {
 με δυνατότητα διαμόρφωσης: αληθής,
 αξία: (σκηνικά) => (
<ΑρχικήΕπόμενηΕικόνα
 {... στηρίγματα}
 μη βελτιστοποιημένη
 />
 ),
});

Αυτός ο κώδικας χρησιμοποιεί το μη βελτιστοποιημένο στήριγμα οπουδήποτε χρησιμοποιείται το στοιχείο της εικόνας.

Χρήση του Storybook στο Next.js

Το Storybook είναι ένα από εκείνα τα εργαλεία που πιστεύετε ότι είναι πολύ κουραστικά για να τα χρησιμοποιήσετε, αλλά μόλις αρχίσετε να τα χρησιμοποιείτε, συνειδητοποιείτε τι χάσατε. Με το Storybook, μπορείτε να δημιουργήσετε και να δοκιμάσετε διαφορετικά στοιχεία χωρίς να εκτελείτε ολόκληρη την εφαρμογή σας. Ως εκ τούτου, κάνει τα δομικά στοιχεία από την αρχή απλά.

Εάν χρησιμοποιείτε το Next.js, βεβαιωθείτε ότι έχετε διαμορφώσει το CSS και απο-βελτιστοποιήσατε τις εικόνες πριν ξεκινήσετε.