Cara Mengatur Buku Cerita untuk Proyek Next.js



Storybook adalah alat yang ampuh untuk membangun 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 melihat bahwa Anda perlu mengonfigurasinya untuk menangani CSS dan gambar dengan benar. Prosesnya bisa membuat frustrasi tetapi langkah-langkah sederhana ini akan membantu memimpin.


Mulailah dengan Menyiapkan Proyek Next.js

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

Inisialisasi Buku Cerita

Jalankan perintah berikut di terminal untuk menginisialisasi Buku Cerita.

npx sb init 

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

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 individu 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 menyimpan semua konfigurasi bersama untuk Buku Cerita.

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

import "../styles/globals.css";

Siapkan Sass untuk Buku Cerita di Next.js

Secara default, Storybook tidak hadir dengan dukungan siap pakai 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 menafsirkan @import dan URL() seperti import/require dan menyelesaikannya.
  • sass-loader memuat SCSS ke dalam CSS.

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

const path = require('path');

module.exports = {
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;
}
}

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 optimalisasi 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 untuk tidak mengoptimalkan gambar dalam cerita.

Untuk memulai, Anda perlu melayani direktori publik di Buku Cerita untuk menunjukkan di mana gambar berada. Anda dapat melakukannya di peta skrip npm di package.json file atau di .buku cerita/main.js.

Di package.jsonperbarui skrip Buku Cerita untuk melayani direktori publik.

"scripts": {
"storybook": "start-storybook -p 6006 -s ./public",
"build-storybook": "build-storybook -s public"
}

Atau, modifikasi ./buku cerita/main.js untuk memasukkan direktori statis yang, dalam hal ini, adalah folder publik.

module.exports = {
"staticDirs": [ "../public" ],
}

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

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

import * as NextImage from "next/image";
const OriginalNextImage = NextImage.default;

Object.defineProperty(NextImage, "default", {
configurable: true,
value: (props) => (
<OriginalNextImage
{...props}
unoptimized
/>
),
});

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

Menggunakan Buku Cerita 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 Anda. Oleh karena itu, membuat komponen bangunan dari bawah ke atas menjadi sederhana.

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


https://www.makeuseof.com/storybook-nextjs-set-up/

Leave a Comment