22k+

GitHub Sterne

100+

Plugins

MIT

Lizenz

10yrs+

In Produktion

Next.js + GrapesJS Blueprint

Gib einen polierten Seitenbauer aus, ohne gegen SSR zu kämpfen.

GrapesJS ist nur browserfähig, während Next.js standardmäßig auf dem Server rendert. Dieser Leitfaden bietet Ihnen die sicherste Architektur für den Client-Only-Editor-Boot, stabile Speicher-/Veröffentlichungs-APIs und ein UX-Erlebnis, das Nutzer schnell lernen können.

Durchsuchen Sie Next.js-kompatible Plugins Vergleichen Sie Open-Source-Optionen

Schnelle Implementierungscheckliste

Führe npm aus, installiere Grapesjs und lade Styles einmal global
Behalten Sie die Editor-Initialisierung in einer Client-only-Komponente.
Deaktivieren Sie SSR mit dynamischem Import { ssr: false }
Füge Autosave zur API-Route hinzu und version deiner Inhaltsnutzlasten
Rendern Sie veröffentlichtes HTML/CSS in einer bereinigten Viewer-Route

⚠

Wichtig: GrapesJS ist nur browserfähig

GrapesJS ruft Browser-APIs auf (document, window, requestAnimationFrame) bei der Initialisierung. Du musst sie benutzen dynamic() mit { ssr: false } im Seiten-Router oder im 'use client' Direktive mit einem isMounted Guard im App-Router. Das Überspringen führt zu einem Build-Time- oder Laufzeitfehler.

Nur kundenseitiges Muster

Der empfohlene Ansatz für Pages Router und App Router ist es, den Editor in zwei Dateien zu teilen: einen dünnen Wrapper, der verwendet dynamic um SSR zu deaktivieren und eine Client-only-Komponente, die GrapesJS initialisiert:

components/GrapesJSEditor.tsx

// components/GrapesJSEditor.tsx
import dynamic from 'next/dynamic';

const GrapesEditor = dynamic(
  () => import('./GrapesEditorClient'),
  { ssr: false, loading: () => <div>Loading editor...</div> }
);

export default function GrapesJSEditor() {
  return <GrapesEditor />;
}

// components/GrapesEditorClient.tsx
import { useEffect, useRef } from 'react';
import grapesjs from 'grapesjs';

export default function GrapesEditorClient() {
  const ref = useRef<HTMLDivElement>(null);

  useEffect(() => {
    const editor = grapesjs.init({
      container: ref.current!,
      storageManager: false,
    });
    return () => editor.destroy();
  }, []);

  return <div ref={ref} style={{ height: '100vh' }} />;
}

App-Router vs. Seiten-Router

Pages Router (Next.js 13.12.)

Verwendung dynamic() von next/dynamic mit { ssr: false }. Alle Komponenten sind standardmäßig React Client Components, daher ist die einzige Voraussetzung, SSR für GrapesJS zu deaktivieren.

App-Router (Next.js 13+)

Hinzufügen 'use client' ganz oben in deiner Editor-Komponente. Du kannst es trotzdem nutzen dynamic() für den Ladezustand, oder ein isMounted State Guard, um das Rendering zu verhindern, bis die Komponente clientseitig montiert ist.

Wählen Sie Ihren Startumfang

MVP in 1-2 Tagen

Verwenden Sie Standardblöcke, lokale Persistenz und einen Publicify-Endpunkt. Am besten für interne Tools oder frühe Customer Trials.

Produktionsstart in 1-2 Wochen

Fügen Sie Blockberechtigungen, Autosave, Asset-Uploads, Versionshistorie und rollenbasierte Veröffentlichungsworkflows hinzu.

SaaS-Builder-Plattform

Multi-Tenant-Speicher, Vorlagen-Marktplatz, Nutzungsquoten, Audit-Logs und branding auf Arbeitsbereichsebene.

Schritt-für-Schritt-Integrationsleitfaden

Installiere GrapesJS

Führe npm und installiere Grapesjs in deinem Next.js-Projekt. TypeScript-Typen sind enthalten.

Erstelle eine client-only Editor-Komponente

Erstellen Sie GrapesEditorClient.tsx, das GrapesJS in einem useEffect-Hook mit einer DOM-Referenz initialisiert.

Wickle mit next/dynamisch (ssr: falsch)

Verwenden Sie dynamic(() => import("./GrapesEditorClient"), { ssr: false }), um serverseitige Ausführung zu verhindern.

Verbinde Speicher mit einer API-Route

Verwenden Sie editor.getHTML() und editor.getCSS(), um Inhalte auf eine Next.js API-Route, Vercel KV oder Supabase zu posten.

Empfohlene Plugins für Next.js Projekte

Lagerung$19

Storage REST API

Verbinde GrapesJS mit Next.js API-Routen zur Persistenz

Blöcke$29

Blocks Library Pro

Produktionsreife Blockbibliothek für Next.js Seitenbauer

E-MailKostenlos

GrapesJS MJML Preset

Erstellen Sie responsive E-Mail-Vorlagen in Ihrer Next.js-App

ExportKostenlos

Export-Plugin

Exportiere sauberes HTML/CSS innerhalb Next.js API-Routen

Beispiele für Speicherintegration

Vercel KV

app/api/page/route.ts

// Save to Vercel KV
import { kv } from '@vercel/kv';

export async function POST(req: Request) {
  const { id, html, css } = await req.json();
  await kv.set(`page:${id}`, { html, css });
  return Response.json({ ok: true });
}

Supabase

lib/savePage.ts

// Save to Supabase
import { createClient } from '@supabase/supabase-js';

const supabase = createClient(
  process.env.NEXT_PUBLIC_SUPABASE_URL!,
  process.env.SUPABASE_SERVICE_KEY!
);

export async function savePage(id: string, html: string, css: string) {
  await supabase.from('pages').upsert({ id, html, css });
}

Bereit, dein Visual Builder-Erlebnis zu starten?

Beginne mit bewährten Plugins und überlege dann eigene Workflows für Teams, Kunden und Veröffentlichungsgenehmigungen.

Entdecken Sie den Plugin-Stack

Next.js Page Builder — GrapesJS-Integrationsleitfaden