Storybook adalah alat yang ampuh untuk membuat komponen UI secara terpisah. Ini membantu Anda membuat dan menguji komponen tanpa menjalankan seluruh aplikasi.

Jika Anda pernah menggunakan Storybook dengan Next.js, Anda akan menyadari bahwa Anda perlu mengonfigurasinya untuk menangani CSS dan gambar dengan benar. Prosesnya bisa membuat frustasi tetapi langkah-langkah sederhana ini akan membantu memimpin.

Mulailah dengan Menyiapkan Proyek Next.js

Jika Anda belum menyiapkan proyek Next.js, ikuti yang resmi Next.js Panduan Memulai untuk membuat proyek baru.

Inisialisasi Buku Cerita

Jalankan perintah berikut di terminal untuk menginisialisasi Buku Cerita.

npx sb init --builder webpack5

Perintah ini mendeteksi proyek yang sedang Anda kerjakan, menginstal semua paket yang diperlukan, dan membuat cerita contoh.

Siapkan CSS

Hal pertama yang perlu Anda lakukan adalah memasukkan file CSS global di preview.js.

Siapkan Gaya Global

Gaya global berlaku di seluruh aplikasi. Untuk menerapkan gaya ini dalam cerita, Anda dapat mengimpor file ke cerita individual dan itu akan berhasil. Namun, Anda akhirnya akan menulis ulang pernyataan impor di banyak cerita atau bahkan lupa.

Solusi yang lebih baik adalah mengimpor gaya global dalam file .buku cerita/pratinjau.js file, file yang menampung semua konfigurasi bersama untuk Buku Cerita.

Di bagian atas .storybook/preview.js, sertakan pernyataan import berikut.

impor "../styles/globals.css";

Siapkan Sass untuk Buku Cerita di Next.js

Secara default, Storybook tidak dilengkapi dengan dukungan out-of-the-box untuk Bahasa ekstensi Sass. Anda perlu memperluas konfigurasi webpack dengan menginstal style-loader, css-loader, dan sass-loader.

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

Inilah yang dilakukan paket-paket ini:

  • style-loader menyuntikkan CSS ke dalam DOM.
  • css-loader menginterpretasikan @import dan URL() seperti import/require dan menyelesaikannya.
  • sass-loader memuat SCSS ke dalam CSS.

Untuk mengonfigurasi paket-paket ini, tambahkan kode berikut di .storybook/main.js:

const jalan = memerlukan('jalur');
modul.ekspor = {
// konfigurasi lainnya
 webpackFinal: asinkron (konfigurasi) => {
 config.module.rules.push(
 {
 tes: /\\.s(a|c)ss$/,
 termasuk: path.resolve (__dirname, '../'),
 menggunakan: [
 'pemuat gaya',
 {
 loader: 'css-loader',
 pilihan: {
 modul: {
 mobil: BENAR,
 localIdentName: '[nama]__[lokal]--[hash: base64:5]',
 },
 },
 },
 'sass-loader'
 ],
 },
 );
kembali konfigurasi;
 }
}

Setelah ini, Sass akan tersedia di Storybook.

Terapkan Prop yang Tidak Dioptimalkan ke Gambar Next.js

Next.js memiliki banyak fitur pengoptimalan. Salah satunya adalah pengoptimalan gambar melalui komponen gambar yang membuat gambar dimuat lebih cepat dan beradaptasi dengan layar. Namun, sulit untuk bekerja dengan Storybook karena Storybook berjalan secara terpisah dari lingkungan Next.js. Lebih baik tidak mengoptimalkan gambar dalam cerita.

Untuk memulai, Anda perlu melayani direktori publik di Storybook untuk menunjukkan di mana gambar berada. Anda dapat melakukannya di skrip npm peta di package.json berkas atau di .storybook/main.js.

Di dalam package.json, perbarui skrip Storybook untuk melayani direktori publik.

"skrip": {
"buku cerita": "start-storybook -p 6006 -s ./public",
"build-storybook": "build-storybook -s publik"
}

Alternatifnya, modifikasi ./storybook/main.js untuk menyertakan direktori statis yang, dalam hal ini, adalah folder publik.

modul.ekspor = {
// konfigurasi lainnya
"staticDir": [ "../publik" ],
}

Setelah melayani direktori publik, terapkan prop yang tidak dioptimalkan ke gambar Next.js yang digunakan dalam cerita.

Di .storybook/main.js, tambahkan kode berikut:

impor * sebagai Gambar Berikutnya dari "berikutnya/gambar";
const GambarBerikutnya Asli = GambarBerikutnya.bawaan;
Obyek.defineProperty (GambarBerikutnya, "bawaan", {
 dapat dikonfigurasi: BENAR,
 nilai: (alat peraga) => (
<OriginalNextImage
 {...Atribut}
 tidak dioptimalkan
 />
 ),
});

Kode ini menggunakan prop yang tidak dioptimalkan di mana pun komponen gambar digunakan.

Menggunakan Storybook di Next.js

Buku cerita adalah salah satu alat yang menurut Anda terlalu membosankan untuk digunakan, tetapi begitu Anda mulai menggunakannya, Anda menyadari apa yang Anda lewatkan. Dengan Storybook, Anda dapat membuat dan menguji berbagai komponen tanpa menjalankan seluruh aplikasi. Oleh karena itu, membuat komponen bangunan dari bawah ke atas menjadi sederhana.

Jika Anda menggunakan Next.js, pastikan Anda mengonfigurasi CSS dan menonaktifkan gambar sebelum memulai.