Storybook, UI bileşenlerini ayrı ayrı 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, onu CSS ve görüntüleri düzgün ş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östermeye yardımcı olacaktır.

Next.js Projesini Kurarak Başlayın

Henüz bir Next.js projeniz yoksa, yeni bir proje oluşturmak için resmi Next.js Başlangıç ​​kılavuzunu izleyin.

Hikaye Kitabını Başlat

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

npx sb init –builder webpack5

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

CSS’yi Ayarla

Yapmanız gereken ilk şey, global CSS dosyasını önizleme.js’ye eklemektir.

Global Stilleri Ayarlayın

Global stiller, uygulamanın tamamında geçerlidir. Bu stilleri hikayelere uygulamak için dosyayı tek tek hikayelere aktarabilirsiniz ve bu işe yarayacaktır. Bununla birlikte, birçok hikayede import ifadesini yeniden yazarsınız veya hatta unutursunuz.

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

.storybook/preview.js dosyasının en üstüne aşağıdaki import ifadesini ekleyin.

import “../styles/globals.css”;

Next.js’de Storybook için Sass’ı Ayarlayın

Varsayılan olarak Storybook, Sass uzantı dili için kullanıma hazır destekle birlikte gelmez . Stil yükleyici, css yükleyici ve sass yükleyici yükleyerek web paketi yapılandırmasını genişletmeniz gerekir.

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

İşte bu paketlerin yaptıkları:

style-loader, CSS’yi DOM’a enjekte eder.

css-loader, @import ve URL()’yi import/require gibi yorumlar ve çözer.

sass-loader, SCSS’yi CSS’ye yükler.

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

const path = require(‘path’);

module.exports = {

// other configurations

    webpackFinal: async (config) => {

    config.module.rules.push(

      {

        test: /\.s(a|c)ss$/,

        include: path.resolve(__dirname, ‘../’),

        use: [

          ‘style-loader’,

          {

            loader: ‘css-loader’,

            options: {

              modules: {

                auto: true,

                localIdentName: ‘[name]__[local]–[hash:base64:5]’,

              },

            },

          },

          ‘sass-loader’

        ],

      },

    );

    return config;

  }

}

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

Optimize Edilmemiş Prop’u Next.js Görsellerine 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. Ancak Storybook, Next.js ortamından ayrı olarak çalıştığından Storybook’ta çalışmak zahmetlidir. Hikayelerdeki görüntülerin optimizasyonunu kaldırmak daha iyidir.

Başlamak için, resimlerin nerede olduğunu belirtmek için Storybook’taki genel dizine hizmet etmeniz gerekir. Bunu package.json dosyasındaki npm komut dosyası haritasında veya .storybook/main.js içinde yapabilirsiniz .

package.json içinde , genel dizine hizmet etmek için Öykü Kitabı komut dosyalarını güncelleyin.

“scripts”: {

    “storybook”: “start-storybook -p 6006 -s ./public”,

    “build-storybook”: “build-storybook -s public”

}

Alternatif olarak, ./storybook/main.js dosyasını , bu durumda ortak klasör olan statik dizini içerecek şekilde değiştirin.

module.exports = {

    // other configurations

    “staticDirs”: [ “../public” ],

}

Genel dizine hizmet verdikten sonra, hikayelerde kullanılan Next.js görüntülerine optimize edilmemiş prop uygulayın.

.storybook/main.js’ye aşağıdaki kodu ekleyin:

import * as NextImage from “next/image”;

const OriginalNextImage = NextImage.default;

Object.defineProperty(NextImage, “default”, {

  configurable: true,

  value: (props) => (

    <OriginalNextImage

      {…props}

      unoptimized

    />

  ),

});

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

Next.js’de Storybook’u Kullanma

Storybook, kullanmanın çok sıkıcı olduğunu düşündüğünüz araçlardan biridir, ancak kullanmaya başladığınızda neyi kaçırdığınızı anlarsınız. Storybook ile tüm uygulamanızı çalıştırmadan farklı bileşenler oluşturabilir ve test edebilirsiniz. Bu nedenle, yapı bileşenlerini sıfırdan basitleştirir.

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.