עריכת תוכן חיה: עריכה חזותית ב-Next.js וב-Sanity CMS

כדי ש-Visual Editing יעבוד, יש להפעיל stega בצד הלקוח. בלעדיו, העורך יכול רק לצפות אך לא ללחוץ על אלמנטים. הנה דוגמה להגדרה:

// lib/sanity/client.ts
import { createClient } from 'next-sanity'

const client = createClient({
  projectId: process.env.NEXT_PUBLIC_SANITY_PROJECT_ID!,
  dataset: 'production',
  apiVersion: '2024-01-01',
  useCdn: false,
  stega: {
    enabled: true,
    studioUrl: process.env.NEXT_PUBLIC_SANITY_STUDIO_URL!,
  },
})

לתצוגה מקדימה חיה עם WebSocket אנו משתמשים ב-// lib/sanity/client.ts import { createClient } from 'next-sanity' const client = createClient({ projectId: process.env.NEXT_PUBLIC_SANITY_PROJECT_ID!, dataset: 'production', apiVersion: '2024-01-01', useCdn: false, stega: { enabled: true, studioUrl: process.env.NEXT_PUBLIC_SANITY_STUDIO_URL!, }, }) . חבילה זו מחברת את defineLive ומעדכנת נתונים אוטומטית כאשר יש שינוי ב-Studio. העורך רואה עריכות בזמן אמת ללא טעינה מחדש.

שלב 1: הגדרת Studio

התקן את התוסף useOptimistic והגדר את @sanity/presentation תוך ציון המקור והמסלולים עבור Draft Mode. דוגמה להגדרה:

// sanity.config.ts
import { presentationTool } from '@sanity/presentation'

export default defineConfig({
  plugins: [
    structureTool(),
    presentationTool({
      previewUrl: {
        previewMode: {
          enable: '/api/draft-mode/enable',
          disable: '/api/draft-mode/disable',
        },
        origin: process.env.SANITY_STUDIO_PREVIEW_URL || 'http://localhost:3000',
      },
    }),
  ],
})

שלב 2: יישום Draft Mode ב-Next.js

צור מסלולי API previewUrl ו-// sanity.config.ts import { presentationTool } from '@sanity/presentation' export default defineConfig({ plugins: [ structureTool(), presentationTool({ previewUrl: { previewMode: { enable: '/api/draft-mode/enable', disable: '/api/draft-mode/disable', }, origin: process.env.SANITY_STUDIO_PREVIEW_URL || 'http://localhost:3000', }, }), ], }) , תוך שימוש ב-/api/draft-mode/enable כדי לאמת את הטוקן הסודי.

// app/api/draft-mode/enable/route.ts
import { validatePreviewUrl } from '@sanity/preview-url-secret'
import { client } from '@/lib/sanity/client'
import { draftMode } from 'next/headers'
import { redirect } from 'next/navigation'

export async function GET(req: Request) {
  const { isValid, redirectTo = '/' } = await validatePreviewUrl(
    client.withConfig({ token: process.env.SANITY_API_TOKEN! }),
    req.url
  )

  if (!isValid) {
    return new Response('Invalid secret', { status: 401 })
  }

  draftMode().enable()
  redirect(redirectTo)
}

// app/api/draft-mode/disable/route.ts
import { draftMode } from 'next/headers'
import { NextRequest, NextResponse } from 'next/server'

export async function GET(req: NextRequest) {
  draftMode().disable()
  return NextResponse.redirect(new URL('/', req.url))
}

שלב 3: חיבור הלקוח

הוסף את /api/draft-mode/disable ל-layout, הגדר את validatePreviewUrl ו-// app/api/draft-mode/enable/route.ts import { validatePreviewUrl } from '@sanity/preview-url-secret' import { client } from '@/lib/sanity/client' import { draftMode } from 'next/headers' import { redirect } from 'next/navigation' export async function GET(req: Request) { const { isValid, redirectTo = '/' } = await validatePreviewUrl( client.withConfig({ token: process.env.SANITY_API_TOKEN! }), req.url ) if (!isValid) { return new Response('Invalid secret', { status: 401 }) } draftMode().enable() redirect(redirectTo) } לעדכונים חיים.

מה כלול בהגדרה?

אנו מספקים מחזור עבודה מלא—מביקורת ועד פריסה עם הדרכת עורכים:

השוואה עם חלופות:

לוחות זמנים וניסיון

הגדרת Visual Editing עם Presentation Tool ו-Draft Mode אורכת בין יום ליומיים עבור פרויקט טיפוסי. עבור פרויקטים מורכבים, לוח הזמנים עשוי להתארך ל-3–5 ימים. העלות מחושבת באופן אישי—אנו מעריכים את הפרויקט שלך ביום עבודה אחד.

הזמן מאיתנו הגדרת Visual Editing—אנו מבטיחים אינטגרציה נכונה בזכות ניסיון של 10+ שנים ו-50+ אינטגרציות CMS מוצלחות. פשוט צור קשר דרך מסנג'ר או דוא"ל—נשלח דוגמת יישום עבור הפרויקט שלך.