Mengumumkan React SDK dengan sokongan penuh untuk Komponen Pelayan React

Pengenalan paradigma Penghala Aplikasi dalam Next.js membawa perubahan ketara kepada cara pembangun membina dan menstruktur aplikasi. Walaupun ia membuka pintu kepada ciri menarik seperti Komponen Pelayan Bertindak balas (RSC) dan kawalan yang lebih halus ke atas pemaparan, ia juga memperkenalkan kerumitan untuk pakej yang diperlukan untuk menyokong persekitaran sisi klien dan pelayan dengan lancar.

Dengan keluaran @storyblok/react versi 4.0.0, kami berbesar hati menawarkan sokongan penuh untuk Komponen Pelayan React dalam Next.js. Kemas kini ini memudahkan pelaksanaan, mendayakan kefungsian pratonton langsung dalam Editor Visual kami dan memastikan pemaparan pelayan yang mantap, semuanya dalam satu persediaan bersatu.

Mulakan menggunakannya sekarang dengan:

npm i @storyblok/react@4

Jika anda menggunakan @storyblok/react v3 dengan Penghala Apl, terdapat beberapa perubahan yang rosak. Sila teruskan membaca artikel ini untuk mengetahui cara mengemas kini apl anda.

---

Apakah yang baharu dalam @storyblok/react 4.0.0?

Berikut ialah ringkasan ringkas tentang peningkatan utama dalam keluaran ini:

1. Sokongan RSC bersatu
   Sebelum ini, Komponen Pelayan React dalam Next.js memerlukan dua pelaksanaan berbeza untuk keserasian. Dengan versi 4.0.0, kami telah menyelaraskan perkara ini dan menyatukan segala-galanya menjadi satu pendekatan yang konsisten.

2. Pratonton langsung dengan Editor Visual
   Pembangun yang menggunakan Penghala Apl kini boleh menikmati keupayaan pratonton langsung secara langsung dalam Editor Visual Storyblok, mempertingkatkan pembangunan dan pengalaman penyuntingan kandungan.

3. Perenderan Pelayan Lancar
   Manfaatkan keupayaan pemaparan pelayan penuh Next.js untuk prestasi yang lebih baik dan kebolehskalaan aplikasi anda

---

Cara menggunakannya

Langkah 1: Mulakan SDK

Mulakan dengan mencipta fail lib/storyblok.js baharu untuk memulakan SDK. Pastikan anda mengeksport fungsi getStoryblokApi().

// lib/storyblok.js
import Page from '@/components/Page';
import Teaser from '@/components/Teaser';
import { apiPlugin, storyblokInit } from '@storyblok/react/rsc';

export const getStoryblokApi = storyblokInit({
  accessToken: 'YOUR_ACCESS_TOKEN',
  use: [apiPlugin],
  components: {
    teaser: Teaser,
    page: Page,
  },
});

Fungsi getStoryblokApi() mengembalikan contoh kongsi klien Storyblok yang berfungsi merentas pelayan dan komponen klien.

Langkah 2: Balut Aplikasi Anda dengan StoryblokProvider

Seterusnya, cipta komponen StoryblokProvider untuk mendayakan penyuntingan langsung pada bahagian pelanggan. Bungkus keseluruhan apl anda dengan pembekal ini dalam fail app/layout.jsx.

// app/layout.jsx
import StoryblokProvider from '@/components/StoryblokProvider';

export default function RootLayout({ children }) {
  return (
    <storyblokprovider>
      
        {children}
      
    </storyblokprovider>
  );
}

Sekarang, buat komponen StoryblokProvider:

// components/StoryblokProvider.jsx
'use client';

import { getStoryblokApi } from '@/lib/storyblok';

export default function StoryblokProvider({ children }) {
  getStoryblokApi(); // Re-initialize on the client
  return children;
}

Perhatikan bahawa StoryblokProvider ialah komponen pelanggan. Ini memastikan komponen pihak pelanggan anda boleh berinteraksi dengan Storyblok, termasuk pengeditan langsung dalam Editor Visual.

Langkah 3: Ambil Kandungan dan Komponen Render

Dalam komponen pelayan, gunakan fungsi getStoryblokApi() untuk mengambil kandungan daripada Storyblok. Berikut ialah contoh fail app/page.jsx.

npm i @storyblok/react@4

Langkah 4: Gunakan StoryblokServerComponent untuk pemaparan pelayan

Untuk memaparkan komponen secara dinamik, sentiasa gunakan StoryblokServerComponent daripada @storyblok/react/rsc.

// lib/storyblok.js
import Page from '@/components/Page';
import Teaser from '@/components/Teaser';
import { apiPlugin, storyblokInit } from '@storyblok/react/rsc';

export const getStoryblokApi = storyblokInit({
  accessToken: 'YOUR_ACCESS_TOKEN',
  use: [apiPlugin],
  components: {
    teaser: Teaser,
    page: Page,
  },
});

Ini memastikan keserasian dengan pemaparan sebelah pelayan, walaupun anda mengisytiharkan komponen sebagai komponen pelanggan.

Apa Seterusnya?

Kami sedang menyediakan dokumentasi rasmi yang dikemas kini untuk menjadikan penggunaan versi 4 lebih lancar. Sementara itu, semua langkah penting disertakan dalam README.

Maklum balas dan sumbangan anda adalah penting untuk menambah baik @storyblok/react! Jika anda mempunyai cadangan atau isu, jangan ragu untuk membuka isu atau menyumbang terus kepada projek itu.

Atas ialah kandungan terperinci Mengumumkan React SDK dengan sokongan penuh untuk Komponen Pelayan React. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!