Storybook, UI bileşenlerini tek başına oluşturmak için güçlü bir araçtır. Tüm uygulamayı çalıştırmadan bileşenleri oluşturmanıza ve test etmenize yardımcı olur.

Storybook'u Next.js ile daha önce kullandıysanız, CSS'yi ve görüntüleri düzgün bir şekilde işlemek için yapılandırmanız gerektiğini fark edeceksiniz. Süreç sinir bozucu olabilir, ancak bu basit adımlar yol göstermenize yardımcı olacaktır.

Next.js Projesini Kurarak Başlayın

Halihazırda bir Next.js projeniz yoksa, resmi takip edin Sonraki.js Yeni bir proje oluşturmak için Başlarken kılavuzu.

Storybook'u Başlat

Storybook'u başlatmak için terminalde aşağıdaki komutu çalıştırın.

npx sb başlangıç --builder webpack5

Bu komut üzerinde çalıştığınız projeyi algılar, gerekli tüm paketleri kurar ve örnek hikayeler oluşturur.

CSS Kurulumu

Yapmanız gereken ilk şey, global CSS dosyasını önizleme.js'ye dahil etmektir.

Genel Stilleri Ayarlayın

Genel stiller, uygulamanın tamamında geçerlidir. Bu stilleri hikayelere uygulamak için dosyayı tek tek hikayelere aktarabilirsiniz ve bu işe yarar. Ancak, içe aktarma ifadesini birçok hikaye boyunca yeniden yazarsınız veya hatta unutursunuz.

instagram viewer

Daha iyi bir çözüm, global stilleri .hikaye kitabı/preview.js dosyası, Storybook için tüm paylaşılan yapılandırmaları tutan bir dosya.

.storybook/preview.js dosyasının en üstüne aşağıdaki içe aktarma ifadesini ekleyin.

içe aktarmak "../styles/globals.css";

Next.js'de Storybook için Sass Kurulumu

Storybook, varsayılan olarak, Sass uzantı dili. Style-loader, css-loader ve sass-loader yükleyerek web paketi yapılandırmasını genişletmeniz gerekir.

npm i -D stil yükleyici css yükleyici sass yükleyici

İşte bu paketlerin yaptıkları:

  • style-loader, CSS'yi DOM'a enjekte eder.
  • css-loader, import/require gibi @import ve URL()'yi yorumlar ve çözer.
  • sass-loader, SCSS'yi CSS'ye yükler.

Bu paketleri yapılandırmak için .storybook/main.js dosyasına aşağıdaki kodu ekleyin:

sabit yol = gerekmek('yol');
modül.ihracat = {
// diğer konfigürasyonlar
 webpackFinal: zaman uyumsuz (yapılandırma) => {
 yapılandırma.module.rules.push(
 {
 Ölçek: /\\.s(a|c)ss$/,
 şunları içerir: path.resolve (__dirname, '../'),
 kullanmak: [
 'stil yükleyici',
 {
 yükleyici: 'css-yükleyici',
 seçenekler: {
 modüller: {
 Oto: doğru,
 localIdentName: '[ad]__[yerel]--[hash: base64:5]',
 },
 },
 },
 'sass-yükleyici'
 ],
 },
 );
geri dönmek yapılandırma;
 }
}

Bundan sonra Sass, Storybook'ta mevcut olmalıdır.

Optimize Edilmemiş Donanımı Next.js Görüntülerine Uygulayın

Next.js birçok optimizasyon özelliğine sahiptir. Bunlardan biri, görüntülerin daha hızlı yüklenmesini ve ekrana uyum sağlamasını sağlayan görüntü bileşeni aracılığıyla görüntü optimizasyonudur. Bununla birlikte, Storybook Next.js ortamından ayrı olarak çalıştığı için Storybook'ta çalışmak zahmetlidir. Hikayelerdeki görsellerin optimizasyonunu kaldırmak daha iyidir.

Başlamak için, görüntülerin nerede olduğunu belirtmek için Storybook'taki genel dizini sunmanız gerekir. içinde yapabilirsiniz npm betikleri haritada paket.json dosya veya içinde .hikaye kitabı/main.js.

İçinde paket.json, Storybook komut dosyalarını genel dizine hizmet verecek şekilde güncelleyin.

"Kodlar": {
"hikaye kitabı": "hikaye kitabı başlat -p 6006 -s ./public",
"inşa-hikaye kitabı": "build-storybook -s genel"
}

Alternatif olarak, değiştir ./hikaye kitabı/main.js bu durumda ortak klasör olan statik dizini dahil etmek için.

modül.ihracat = {
// diğer konfigürasyonlar
"staticDirs": [ "../halk" ],
}

Genel dizini sunduktan sonra, optimize edilmemiş prop'u hikayelerde kullanılan Next.js resimlerine uygulayın.

.storybook/main.js dosyasına aşağıdaki kodu ekleyin:

içe aktarmak * gibi SonrakiResim itibaren "sonraki/resim";
sabit OrijinalNextImage = SonrakiGörüntü.varsayılan;
Nesne.defineProperty (NextImage, "varsayılan", {
 yapılandırılabilir: doğru,
 değer: (sahne) => (
<OrijinalSonrakiGörüntü
 {...sahne}
 optimize edilmemiş
 />
 ),
});

Bu kod, görüntü bileşeninin kullanıldığı her yerde optimize edilmemiş pervaneyi kullanır.

Next.js'de Storybook'u Kullanma

Storybook kullanmanın çok sıkıcı olduğunu düşündüğünüz ama kullanmaya başlayınca neleri kaçırdığınızı anladığınız araçlardan biri. Storybook ile tüm uygulamanızı çalıştırmadan farklı bileşenler oluşturabilir ve test edebilirsiniz. Bu nedenle, bina bileşenlerini sıfırdan basit hale getirir.

Next.js kullanıyorsanız, başlamadan önce CSS'yi yapılandırdığınızdan ve görüntülerin optimizasyonunu kaldırdığınızdan emin olun.