Stāstu grāmata ir spēcīgs rīks lietotāja interfeisa komponentu izveidei atsevišķi. Tas palīdz izveidot un pārbaudīt komponentus, nepalaižot visu lietojumprogrammu.

Ja kādreiz esat izmantojis Storybook ar Next.js, pamanīsit, ka tas ir jākonfigurē, lai pareizi apstrādātu CSS un attēlus. Process var būt nomākts, taču šīs vienkāršās darbības palīdzēs parādīt ceļu.

Sāciet, iestatot Next.js projektu

Ja jums vēl nav izveidots Next.js projekts, sekojiet oficiālajai informācijai Next.js Darba sākšanas ceļvedis jauna projekta izveidei.

Inicializējiet stāstu grāmatu

Terminālī palaidiet šādu komandu, lai inicializētu Storybook.

npx sb init -- Builder tīmekļa pakotne5

Šī komanda nosaka projektu, pie kura strādājat, instalē visas nepieciešamās pakotnes un izveido piemēru stāstus.

Iestatiet CSS

Pirmā lieta, kas jums jādara, ir iekļaut globālo CSS failu preview.js.

Iestatiet globālos stilus

Globālie stili ir spēkā visā lietojumprogrammā. Lai lietotu šos stilus stāstos, varat importēt failu atsevišķos stāstos, un tas darbosies. Tomēr jūs varētu pārrakstīt importēšanas paziņojumu daudzos stāstos vai pat aizmirst to.

instagram viewer

Labāks risinājums ir importēt globālos stilus mapē .stāstu grāmata/preview.js fails, fails, kurā ir visas koplietotās stāstu grāmatas konfigurācijas.

Faila .storybook/preview.js augšdaļā iekļaujiet tālāk norādīto importēšanas paziņojumu.

imports "../styles/globals.css";

Iestatiet Sass for Storybook vietnē Next.js

Pēc noklusējuma Storybook netiek nodrošināts gatavs atbalsts Sass paplašinājuma valoda. Jums ir jāpaplašina tīmekļa pakotnes konfigurācija, instalējot style-loader, css-loader un sass-loader.

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

Lūk, ko dara šīs paketes:

  • style-loader ievada CSS DOM.
  • css-loader interpretē @import un URL(), piemēram, importēšanu/prasību, un atrisina tos.
  • sass-loader ielādē SCSS CSS.

Lai konfigurētu šīs pakotnes, failā .storybook/main.js pievienojiet šādu kodu:

konst ceļš = pieprasīt('ceļš');
modulis.exports = {
// citas konfigurācijas
 webpackFinal: asinhrons (konfigurācija) => {
 config.module.rules.push(
 {
 pārbaude: /\\.s(a|c)ss$/,
 iekļaut: path.resolve (__dirname, '../'),
 izmantot: [
 "stila ielādētājs",
 {
 ielādētājs: 'css-loader',
 opcijas: {
 moduļi: {
 auto: taisnība,
 localIdentName: '[nosaukums]__[local]--[hash: base64:5]',
 },
 },
 },
 'sass-loader'
 ],
 },
 );
atgriezties konfigurācija;
 }
}

Pēc tam Sasam vajadzētu būt pieejamam stāstu grāmatā.

Lietojiet neoptimizēto rekvizītu Next.js attēliem

Next.js ir daudz optimizācijas funkciju. Viens no tiem ir attēla optimizācija, izmantojot attēla komponentu, kas ļauj attēliem ātrāk ielādēt un pielāgoties ekrānam. Tomēr ir sāpīgi strādāt ar Storybook, jo Storybook darbojas izolēti no Next.js vides. Labāk ir deaktivizēt attēlus stāstos.

Lai sāktu, jums ir jāapkalpo publiskais direktorijs Storybook, lai norādītu, kur atrodas attēli. To var izdarīt sadaļā npm skripti kartē pack.json failā vai iekšā .storybook/main.js.

In pack.json, atjauniniet Storybook skriptus, lai tie apkalpotu publisko direktoriju.

"skripti": {
"stāstu grāmata": "sākuma stāstu grāmata -p 6006 -s ./public",
"būvēt-stāstu grāmata": "build-stāstu grāmata -s publiska"
}

Alternatīvi modificējiet ./storybook/main.js lai iekļautu statisko direktoriju, kas šajā gadījumā ir publiskā mape.

modulis.eksportu = {
// citas konfigurācijas
"staticDirs": [ "../publisks" ],
}

Pēc publiskā direktorija apkalpošanas lietojiet neoptimizēto rekvizītu stāstos izmantotajiem Next.js attēliem.

Failā .storybook/main.js pievienojiet šādu kodu:

imports * kā Nākamais attēls no "nākamais/attēls";
konst OriginalNextImage = Nākamais attēls.noklusējuma;
Objekts.defineProperty (NextImage, "noklusējuma", {
 konfigurējams: taisnība,
 vērtība: (rekvizīti) => (
<OriginalNextImage
 {...rekvizīti}
 neoptimizēts
 />
 ),
});

Šis kods izmanto neoptimizētu rekvizītu visur, kur tiek izmantots attēla komponents.

Stāstu grāmatas izmantošana vietnē Next.js

Stāstu grāmata ir viens no tiem rīkiem, kas, jūsuprāt, ir pārāk nogurdinoši, lai tos izmantotu, taču, kad sākat tos lietot, jūs saprotat, kā jums pietrūka. Izmantojot Storybook, varat izveidot un pārbaudīt dažādus komponentus, nepalaižot visu lietojumprogrammu. Tādējādi tas padara ēkas sastāvdaļas vienkāršus no paša sākuma.

Ja izmantojat vietni Next.js, pirms darba sākšanas noteikti konfigurējiet CSS un atspējojiet attēlu optimizāciju.