nextjs server

Buku cerita NextJs Server

Storybook NextJS Server adalah kerangka kerja yang sangat eksperimental untuk membangun komponen bereaksi secara terpisah. Berbeda dengan Stable @storybook/nextjs , itu tertanam di dalam aplikasi NextJS Anda dan diterjemahkan oleh NextJS.

Ini memiliki beberapa manfaat utama:

1. Anda hanya perlu memulai satu server saat Anda mengembangkan aplikasi Anda
2. Ini "ringan" karena aplikasi Anda melakukan sebagian besar pengangkatan berat
3. Komponen Anda membuat secara identik bagaimana mereka merender di aplikasi Anda
4. Anda dapat menggunakannya untuk mengembangkan komponen server bereaksi

• Memasang
• Awal
• Mengembangkan
  • Direktori halaman
  • Direktori Aplikasi
• Menyesuaikan

Memasang

Untuk menginstal, jalankan yang berikut dalam proyek NextJS yang ada:

npm create nextjs-storybook

Kemudian perbarui next.config.js Anda untuk menggunakan dekorator withStorybook .

 + const withStorybook = require('@storybook/nextjs-server/next-config')(/* sb config */);

/** @type {import('next').NextConfig} */
- module.exports = {/* nextjs config */}
+ module.exports = withStorybook({/* nextjs config */}); 

Awal

Penginstal menambahkan sampel cerita ke direktori /src/stories atau /stories . Untuk melihat buku cerita Anda, cukup jalankan server Dev NextJS Anda:

npm run dev

Aplikasi Anda harus ditampilkan seperti biasa, tetapi harus mendapatkan rute baru, /storybook , yang menampilkan cerita Anda.

Ini dapat gagal jika server dev nextJS Anda tidak berjalan di port default, yaitu 3000 atau variabel lingkungan $PORT jika diatur. Jika port yang ditentukan sudah diambil, NextJS akan meningkat secara otomatis untuk menemukan port gratis dan ini mengacaukan buku cerita dalam konfigurasi saat ini. Anda dapat menyesuaikan pengaturan Anda untuk berbagai port, rute, dll. Sesuai kebutuhan.

Mengembangkan

Mengembangkan dalam Storybook didokumentasikan dalam dokumen resmi, tetapi ada beberapa nuansa yang harus diperhatikan di Storybook NextJS Server. Perilaku berbeda tergantung pada apakah Anda berjalan di pengaturan pages NextJS (lama) atau direktori app .

Jika aplikasi Anda berjalan di direktori pages , cerita buku cerita diimplementasikan sebagai komponen klien React dan harus berperilaku sangat mirip dengan buku cerita stabil untuk NextJS.

Jika aplikasi Anda berjalan di direktori app , cerita Storybook berjalan sebagai React Server Components (RSC), karenanya tunduk pada berbagai kendala RSC.

Direktori halaman

FixMe

Direktori Aplikasi

FixMe

Menyesuaikan

Fungsi withStorybook menerima beberapa opsi konfigurasi, yang semuanya opsional:

Pilihan	Keterangan	Bawaan
pelabuhan	Port yang akan dijalankan oleh aplikasi Next.js.	Process.env.port ?? 3000
SBPORT	Port internal buku cerita yang akan berjalan.	34567
Manajerpath	Jalur URL ke "Manajer" Buku Story UI.	'Buku cerita'
Previewpath	Jalur URL Menuju Pratinjau Story Story Iframe.	'Storybook-Preview'
configdir	Direktori di mana file konfigurasi buku cerita berada.	'.Storybook'
appdir	Apakah akan menggunakan direktori aplikasi NextJS.	belum diartikan