GrapesJS 是一款强大的拖放模板构建器，许多开发者用它来构建页面编辑器和邮件设计器。如果你已经在用 GrapesJS，想把它嵌入到现代 React 应用里，那你很幸运——官方的 @grapesjs/react 包让与 React（以及 Next.js 13+ 应用路由器）的集成更简洁。在本指南中，我们将探讨 GrapesJS 如何适应使用官方包装器Next.js（React + TypeScript）架构，提供实用示例、插件和自定义组件的技巧，以及性能和可靠性的最佳实践。
为什么要用@grapesjs/反应包装？（建筑概述）
@grapesjs/react 包是 GrapesJS 的官方 React 包装器，旨在简化在 React 应用中使用 GrapesJSgithub.com.包装器无需手动初始化 useEffect 的 GrapesJS 编辑器并处理 DOM 操作，而是提供了一个声明式的 React 组件，帮你管理编辑器的生命周期。
工作原理： 在底层，包装器在组件挂载时创建 GrapesJS 编辑器实例，并通过 React 上下文将其提供给组件。这意味着你可以用 React 围绕 GrapesJS 画布构建自定义界面 ，或者直接使用 GrapesJS 的默认界面。重要的是，包装器的目标 不是 替换GrapesJS自己的画布，也不允许React组件 进入 画布内部——而是将GrapesJS编辑器集成 到你的 React应用中。换句话说，你的 React 组件仍然处于 GrapesJS iframe 之外;GrapesJS 画布依然像往常一样渲染 HTML/CSS 内容（这让内容保持稳定和隔离）。
Next.js 应用路由器的注意事项： Next.js 13+ 引入了 App Router 和 React Server 组件。GrapesJS 是一个以浏览器为中心的库（它访问 DOM），所以我们必须确保它只在客户端上运行。@grapesjs/react 包装器兼容最新的 React 18/19 和 Next.js 版本（包的 v2 支持 React 19 和 Next.js 15+），但你仍然需要避免为编辑器组件 进行服务器端渲染 。我们会通过使用 Next 的 use client 指令或动态导入来实现这一点。结果是即使在Next.js的SSR环境中也能无缝集成——GrapesJS只会在客户端加载，而客户端则能访问窗口和DOM。
在Next.js 13+ 项目中搭建 GrapesJS
让我们一起讲解如何用 GrapesJS 和 React 包装器搭建一个 Next.js 应用，并用 TypeScript 来保证类型安全。我们假设你已经有一个Next.js 13+项目（使用App Router结构）。
1. 安装GrapesJS和React包装器： 在你的项目中添加所需的包：
NPM 安装 Grapesjs @grapesjs/react # 或 with yarn： # yarn 添加 Grapesjs @grapesjs/React
GrapesJS 核心库是封装器的对等依赖，所以你必须单独安装它。确保你的GrapesJS版本>= 0.22.x，以实现完全兼容。
2. 为编辑器创建客户端组件： 在Next.js App Router中，你可以创建一个新页面（例如，/app/editor/page.tsx），用于托管GrapesJS编辑器。该页面应使用 客户端组件，因为它涉及仅浏览器逻辑。你可以把页面标记为客户端组件，或者更好的是把编辑器封装在一个独立组件里。这里为了简化，我们将把它放在一个文件里：
“使用客户端”; 确保此页面作为客户端组件
渲染，import：grapesjs，{ Editor } from 'grapesjs';
从 '@grapesjs/react' 导入 GjsEditor;
可选地导入或包含 GrapesJS CSS：
import 'grapesjs/dist/css/grapes.min.css'; 面板等使用GrapesJS核心样式。
export default 函数 PageBuilder（） {
Handler 用于在编辑器实例准备好
后捕获 const onEditorReady = （editor： Editor） => {
console.log（'GrapesJS Editor initialized：'， editor）;
如果需要
，你可以将编辑器实例存储在状态或上下文中};
return （
<div style={{ height： '100vh' }}>
<GjsEditor
grapesjs={grapesjs}
grapesjsCss=“https://unpkg.com/grapesjs/dist/css/grapes.min.css”
options={{
GrapesJS init configuration：
height： '100%'， fill container height
storageManager： false，禁用 此示例中的存储（无本地存储）如果你
想先用一些内容，可以在这里包含：
components： '<h1>Hello GrapesJS</h1>'，
style： 'h1{color：red;}'，
}}
onEditor={onEditorReady}
/>
</div>
）;
}
让我们来解析这段代码：
- 我们使用了顶部的“使用客户端”指令，确保该页面（以及GrapesJS组件）不会被尝试在服务器上渲染。GrapesJS 只会在浏览器中加载，避免 SSR 错误。
- 我们导入 grapesjs，并将其作为道具传递给 <GjsEditor> 组件。 这是必须的 ——包装器需要 GrapesJS 库实例来初始化编辑器
- .（你也可以传递 GrapesJS CDN URL 字符串，但在 Next 中通常会从 NPM 导入。）
- 我们还传递了一个指向GrapesJS核心CSS的grapesjscss道具。这确保了 GrapesJS 默认样式被加载（用于编辑器框架和面板）。在这种情况下，我们使用 unpkg CDN 链接，但由于我们也在本地导入了 CSS，所以两种方式都可行。CDN方法会异步加载CSS
- options prop 包含 GrapesJS 初始化配置。这相当于你传递给 grapesjs.init（）。例如，我们设置了高度：'100%'，并禁用了存储管理器（这样更改就不会自动保存）。你可以在这里包含 任何 GrapesJS 的选项 ——例如，容器由包装器内部处理，但你可以指定画布设置、插件、资产管理器选项等。（我们稍后会添加插件。）
- onEditor prop 是一个回调，创建后会给你 GrapesJS 编辑器实例。我们这里用它来记录编辑器或执行任何设置操作。在这里你可以加载数据到编辑器、注册事件，或存储编辑器对象以备后用。
在Next.js中运行这个：当你进入 /editor 时，页面会加载 GrapesJS 编辑器。第一次加载可能需要一点时间（GrapesJS 是一个大型库），但之后的导航会因为缓存而更快。在开发过程中，你应该会看到 GrapesJS 默认界面——画布（默认是空白的白色区域）和围绕它的 GrapesJS 面板（样式管理器、图层管理器等）。
正确处理SSR： 如果你忘记添加“使用客户端”或尝试在服务器环境中导入 GrapesJS，你会遇到错误（例如“窗口未定义”）。另一种做法是使用 Next 的动态导入，并使用 ssr： false 来确保组件只在客户端加载
“使用客户端”;
从“next/dynamic”导入动态;
动态导入 GrapesJS 编辑器组件以禁用 SSR
const GrapesEditorNoSSR = dynamic（（） => import（'@grapesjs/react'）.then（mod => mod.default）， { ssr： false }）;
export default function PageBuilder（） {
return <GrapesEditorNoSSR grapesjs={grapesjs} grapesjsCss=“...”options={{ /* ... */ }} />;
}
这也能达到类似效果，如果你想对GrapesJS重模块进行代码拆分，这会很有用。在我们的情况下，在页面上使用“使用客户端”就足够了，因为它确保整个页面都是客户端的。
加载自定义插件、模块和组件
GrapesJS 的一个优势是其通过插件的可扩展性以及定义自定义块类型或组件的能力。在 React+Next 集成中，加载插件或添加自定义块主要有两种方式：
A. 通过GrapesJS初始化选项（插件优先使用）： 你可以在 Options prop 里传递插件数组和 pluginsOpts，这样在编辑器初始时会自动加载插件。例如，要包含流行的 网页预设插件 （提供一组基本块，如文本、图片、列等），请执行以下操作：
- 安装插件包：npm install grapesjs-preset-webpage。
- 导入插件函数并包含在选项中：
import presetWebpage from 'grapesjs-preset-webpage';
<GjsEditor grapesjs={grapesjs}
grapesjsCss=“https://unpkg.com/grapesjs/dist/css/grapes.min.css”
options={{
height： '100%'，
storageManager： false，
plugins： [presetWebpage]，
pluginsOpts： {
optional： configure the preset plugin
[presetWebpage.name as string]： {
/* 例如，块： ['link-block'， 'quote'， ...] 以自定义包含的块 */
}
}，
canvas： {
styles： [
包含预设 CSS，使块在画布中有正确的样式：
'https：//unpkg.com/grapesjs-preset-webpage/dist/grapesjs-preset-webpage.min.css'
] }
}}
onEditor={onEditorReady}
/>
在上面：
- 我们在插件列表中添加了presetWebpage，所以GrapesJS会在初始化时运行该插件。大多数 GrapesJS 插件（无论是官方还是社区插件）都可以通过导入插件并将其添加到插件数组来添加。
- 我们还在配置中使用canvas.styles，将预设的CSS注入到GrapesJS画布iframe中。这对于依赖特定样式的插件块来说至关重要。GrapesJS 配置允许指定加载到 canvas 的 CSS 文件（URL）数组。
- 我们通过 unpkg 指向预设的 CSS。（或者，你也可以本地提供CSS并使用相对路径，或者导入CSS并提供路径。）
- pluginsOpts 允许将配置传递给插件。对于预设网页，你可能会限制包含哪些方块等。如果你不需要配置，可以省略pluginsOpts或者留下一个空对象。
预设加载后，GrapesJS编辑器会先有一组基本的块和组件（文本、图片、列等），准备拖入画布。你应该会看到方块面板已经被填充并正常工作。
B. 通过 onEditor 回调或 React 钩子（用于自定义逻辑）： 如果你想注册你创建的自定义块或组件类型，可以在编辑器初始化后进行。例如，使用onEditor提供的编辑器实例：
cont onEditorReady = （编辑器：编辑者） => {
1.添加自定义块
编辑器。BlockManager.add（'my-custom-block'， {
标签： 'Alert Box'，
category： 'Basic'，
content： '<div class=“alert-box”>Hello！ 🥳 </div>'，
attributes： { class： 'gjs-fonts gjs-f-b1' } // block 图标（使用 grapesjs 默认设置）
}）;
2.定义一个自定义组件类型（针对警报框，带有默认行为）
编辑器。DomComponents.addType（'alert-box'， {
model： {
defaults： {
default content and style
tagName： 'div'，
attributes： { class： 'alert-box' }，
components： [{ type： 'text'， content： 'Alert message...'}]，
styleable： ['background-color'， 'padding'， 'border-radius'] 允许样式
}
} }
）;
};
在上面的摘要中，当编辑器加载时，我们会添加一个名为“Alert Box”的新块，插入一个<div class=“alert-box”>元素，并注册一个对应的组件类型“alert-box”，以便GrapesJS知道如何在画布中处理该元素（这里我们只需指定默认值）。这种方法利用了标准的 GrapesJS API（BlockManager.add、DomComponents.addType 等），但实际上是在 React 应用的上下文中实现的。由于我们处于React环境，通常更方便使用包装器提供的钩子，而不是原始的onEditor回调——具体来说，使用Editor或WithEditor——这样编辑器实例可以在任何组件中使用。
例如，包装器提供了一个 useEditor（） 钩子，可以返回编辑器实例（一旦创建）在组件树中 <GjsEditor> 内的任何位置。你可以创建一个自定义的React工具栏组件，使用这个钩子：
从 '@grapesjs/react' 导入 { useEditor };
function SaveButton（） {
const editor = useEditor（）; // 编辑器在这里必然存在（编辑器准备好后必须使用）
const handleSave = （） => {
const html = editor.getHtml（）;
const css = editor.getCss（）;
......根据需要
发送到服务器或进程console.log“已保存的HTML”，html）;
};
return <button onClick={handleSave}>Save Page</button>;
}
在你的编辑器页面 JSX：
<GjsEditor grapesjs={grapesjs} options={...}>
<div style={{ display： 'flex' }}>
<SaveButton />
<Canvas /> {/* 在这里渲染 GrapesJS 画布 */}
</div>
</GjsEditor>
在这个例子中，我们利用了包装器的 自定义界面模式。通过在 <GjsEditor> 中包含我们自己的 JSX 子节点，并使用 <Canvas/> 组件，我们完全覆盖了 GrapesJS 的默认界面。我们在<Canvas/>旁边放置了一个SaveButton组件（使用useEditor获取编辑器）。<Canvas>组件由@grapesjs/react提供，代表GrapesJS iframe/canvas;你可以把它放在你想要的布局中的任何位置。一旦你加入了<Canvas/>，包装器就会 禁用GrapesJS的内置面板。这允许你在控制GrapesJS的同时，围绕编辑器构建完全自定义的UI。
作为一个完整的自定义UI示例，GrapesJS团队提供了一个StackBlitz演示（文档中有链接），展示了一个React应用如何实现面板、工具箱、图层等，使用上下文提供者和钩子。在大多数情况下，你可以先用默认界面，然后根据需要逐步替换为自定义的 React 组件。
最佳实践：性能、清理与造型
将像GrapesJS这样复杂的库集成到React/Next.js中需要谨慎。以下是一些最佳实践和建议，帮助你保持整合顺畅：
防止多个实例（React严格模式）： 在开发过程中，React 18的严格模式有意将组件挂载两次，以帮助捕捉副作用。如果不处理，这可能导致GrapesJS编辑器初始化了两次。@grapesjs/react 包装器设计成避免双重初始化，但如果你手动调用 grapesjs.init 要注意。一定要确保只创建一次编辑器。使用包装器的组件（内部使用 useEffect 来初始化并为容器提供 ref）可以避免这个问题。
在卸载时摧毁编辑器：如果你的 GrapesJS 编辑器组件卸载（例如在单页应用上下文中离开页面时），你应该销毁编辑器实例以释放内存。官方的包装程序会帮你处理清理——当 <GjsEditor> 组件卸载时，它会在内部调用 editor.destroy（）。如果你做的是手动集成，你会在 useEffect 里实现一个清理，比如 return （） => editor.destroy（）。未能销毁可能导致内存泄漏（GrapesJS 内部的事件监听器和计时器会持续存在）。完成后务必处理掉编辑。
将 GrapesJS 隔离到客户端： 我们已经强调过这一点，但值得重复一遍作为一个陷阱：GrapesJS 无法在服务器上运行。使用“use client”和/或带ssr：false的动态导入，确保GrapesJS在SSR期间没有任何部分被执行。如果你看到关于窗口或文档未找到的错误，说明服务器上还在尝试运行。如果（typeof window ！== 'undefined'）包裹导入或组件，也可以防止这种情况，但 Next 内置的模式通常已经足够了。
跨iframe的造型（画布样式）： GrapesJS 使用画布的 iframe 来管理画布，这意味着被编辑的内容与应用分开在 一个独立的文档 中。这提供了隔离（你的应用的CSS不会渗透到画布中，反之亦然），但也意味着如果你的块/组件依赖某些CSS（比如Bootstrap或自定义样式），你需要明确加载这些样式到画布中。利用 GrapesJS 配置中的 canvas.styles 数组注入外部 CSS URL。如前所述，我们就是这样包含了预设的CSS。你也可以通过 GrapesJS 配置中的样式（单页）或样式（多页样式）选项传递 CSS 字符串来添加全局样式。例如，style： '.my-class{...}' 将应用于初始内容。对于较大的样式表，可以使用带有 URL 或 base64 数据 URL 的 canvas.styles。这能确保你的画布内容看起来符合预期。
提示： 如果你想让 GrapesJS 画布继承一些基础样式（字体、重置等），可以为画布创建一个小的 CSS 文件。许多开发者通过canvas.styles包含重置功能，甚至默认字体家族。还要记住，GrapesJS的默认组件（如文本、链接、图片）是无样式的，所以如果你想要默认的外观（比如文本块使用特定字体或颜色），可以考虑注入样式表或使用GrapesJS CSS规则。
定制GrapesJS的用户界面样式： 虽然画布是隔离的，但 GrapesJS 编辑器的界面（面板、按钮、图标）存在于父文档中，并由 grapes.min.css 样式化。如果需要，你可以覆盖这些样式以更好地匹配你的应用。例如，你可以覆盖 .gjs-pn-commands 类，通过应用中的 CSS 重新样式顶部栏（因为这些元素在 React DOM 里）。要注意细节，只覆盖必要的部分以避免破坏布局。包装本身不提供主题，所以自定义CSS是调整外观的好方法。
性能提示： GrapesJS 虽然很繁琐，但你可以做一些事情来保持应用响应：
- 使用动态导入（代码拆分），这样 GrapesJS 及其插件直到用户真正需要编辑器页面时才会被加载。Next.js会为编辑器创建一个独立的区块，减少应用的初始负载。
- 禁用你不需要的功能。例如，如果本地存储自动保存（StorageManager）未被使用，关闭它（就像我们用 storageManager： false 一样），以避免不必要的操作。同样，如果你不常用 GrapesJS 的撤销管理器或样式管理器，也不要启用它们——不过大多数情况下你还是会想用它们。
- 利用GrapesJS的新改进来处理大内容。最新版本引入 了虚拟DOM和虚拟列表 渲染优化。如果你计划在画布中包含数百个组件，确保使用支持VirtualList的版本（GrapesJS 0.22+）。VirtualList 功能只渲染视口中需要的巨大列表内容，从而提升大页面的性能。
- 如果你添加了自定义的事件监听者，可以清理。例如，如果你在onEditor中附加了一个editor.on（'component：selected'， ...），你的组件重新渲染或添加了另一个，确保你没有多次重复监听器。你可以存储一个引用来表示已添加监听器，或者在卸载时移除监听器。同样，包装器通过存在于组件生命周期内来帮助，但它无法知道你附加的自定义事件。
避免在 GrapesJS Canvas 中渲染 React： 如前所述，官方包装 器并不是 为了让你在 GrapesJS 画布里神奇地使用 React 组件。画布输出的是纯HTML/CSS。如果你有想在 GrapesJS 中显示的 React 组件，通常需要编译成 HTML 或使用插件方法（一些实验插件会在 GrapesJS 中渲染框架，但那是高级的）。GrapesJS 团队推出了
React Renderer （作为企业版 Studio SDK 的一部分）可以在画布上渲染 React/Vue 组件，但这超出了本文的讨论范围。在大多数使用场景中，将GrapesJS画布内容视为静态标记。如果需要，你总可以在网站前端用React对保存的HTML/CSS进行后处理（例如，加载已保存页面后挂载交互式小部件）。
国家管理： 如果你需要将GrapesJS数据与React状态或全局存储（如Redux等）同步，避免试图实时保持GrapesJS内部状态与外部状态同步——这可能会变得复杂。相反，使用事件钩子来判断何时发生变化，然后提取数据。例如，editor.on（'change：component：style'， ...）可能表示样式已更改;你可能会更新表格什么的。但通常更简单的方法是：当用户点击“保存”时，只需取 editor.getProjectData（） 或 .getHtml（） 并存储。试图双向绑定每个改动是过度设计，可能会损害性能。把GrapesJS当作你React应用中的一个独立子系统来使用。
常见陷阱及如何避免
总结一下，以下是一些常见的集成陷阱以及如何避免：
- ❌ SSR/水分错误： 如果你在尝试渲染编辑器时看到Next.js错误（或者编辑器应该在的位置出现空白屏幕），检查一下你用了“使用客户端”或动态导入。另外，不要在共享布局或任何服务器组件顶部导入 GrapesJS 或插件。只在客户端组件或动态模块中导入它们。这样可以确保Next的服务器根本看不到这些导入。
- ❌ GrapesJS 出现了，但面板没有样式： 这通常意味着 GrapesJS 的 CSS 没有加载。确保你要么在客户端上下文导入了CSS，要么提供了grapesjscsss prop。如果画布内容看起来没有样式（例如预设块没有样式），请确保你按照描述（使用 canvas.styles）加载了插件的 CSS。
- ❌ 编辑器在重新渲染时会重新初始化或失去状态： 包装组件应该在重渲染时维护编辑器实例（除非卸载，否则不会销毁和重建）。但是，如果你每次渲染都传递一个新的选项对象（比如每次都在父组件里创建），你可能会无意中让组件误以为道具变了。理想情况下，把选项对象定义在渲染之外，或者用 useMemo 包裹，避免频繁更换道具。回调道具如 onEditor 也是如此——要稳定地定义它们（或者使用 useCallback）。这样<GjsEditor>就不会重置。大多数情况下，你只会安装一次，所以这不是大问题，但请记住这一点。
- ❌ 离开后出现内存泄漏： 如前所述，确保销毁编辑器。如果使用包装器，这部分会被处理，但如果你以后自定义使用 GrapesJS，请务必调用 editor.destroy（）。另外，删除你附加的任何DOM事件监听器（例如，如果你直接添加了窗口或文档事件）。GrapesJS 本身会在 destroy 时移除其内部监听器。
- ❌ 使用过时的GrapesJS版本： React 封装器通常要求最低 GrapesJS 版本（例如 @grapesjs/react v1.x 需要 GrapesJS >=0.21.3）。如果你发现类型错误或运行时问题，确保你的 GrapesJS 包是最新的。React 版本兼容性也是一样（封装器的 v2 是为 React 18/19 和 Next 15 设计的）。如果有疑问，可以查看包装的README中的兼容性matri。
- ❌ 尝试将编辑者或多个编辑者嵌套在同一页面： 虽然页面上可以有多个 GrapesJS 编辑器实例，但这很高级，通常不是必需的。如果你尝试，确保每个箱子都有自己的容器，不要混用配置。理论上包装器可以同时使用两次，但你需要考虑样式范围，或者确保性能能支持它。大多数时候，一次一个编辑就够了。
了解这些陷阱，你可以节省大量调试时间。许多问题归结于环境不匹配（服务器与客户端）以及资产加载（CSS/JS）。
使用@grapesjs/react与手动集成的优势
最后，让我们反思为什么使用官方 React 包装相比“手动”方法（比如在 React useEffect 中调用 grapesjs.init（） 更有利。有经验的 GrapesJS 用户可能在这个包出现之前就已经把它集成进了 React，那么这个包装器到底添加了什么？
- 简化生命周期管理： 包装器负责在正确时间初始化编辑器，并在组件卸载时销毁编辑器。你不需要写效果清理逻辑，也不需要处理容器 div 的引用——一切都是封装的。这样可以减少样板程序和内存泄漏或重复初始化的风险。
- 声明式界面构建： 通过暴露 React 上下文和钩子（比如 useEditor），@grapesjs/react 允许你在 React 中构建自定义控件，并与 GrapesJS 无缝交互
- .没有包装器，你就得手动传递编辑器实例，或者用你自己创建的上下文。官方包装器开箱即用，使代码更简洁且模块化。
- 支持自定义界面模式： 如图所示，你可以选择使用 GrapesJS 的默认界面，或者禁用它，然后用 React 创建自己的面板。包装器通过提供诸如<Canvas/>和上下文提供者等组件，使后者变得更简单。手动集成也可以隐藏默认界面，但如果没有包装器预设的钩子和结构，将自己的UI接入GrapesJS事件会更复杂。
- TypeScript友好： GrapesJS 和 @grapesjs/react 都是用 TypeScript 编写的。使用包装器时，编辑器实例会获得强类型（Editor类型来自grapesjs），这有助于自动补全和捕捉错误。上面 onEditor 回调的示例表明编辑器类型为 Editor（从 grapesjs 导入）。
- .如果你手动集成，可能已经用过任何类型，或者不得不导入GrapesJS类型——封装只是让它更集成。
- Next.js兼容性： 官方包装器经过Next.js测试，甚至提供了关于“Next”版本使用哪个版本的说明
- .这意味着边缘情况（比如与 React 18 变更的兼容性，或未来的 React 19 功能）更有可能被处理。事实上，GrapesJS 最近的更新明确提到了无缝Next.js集成，而封装器正是促进这一点的。使用维护良好的官方包可以降低未来 React 更新导致 GrapesJS 设置崩溃的可能性。
- 社区与支持： 作为官方集成，它很可能会得到GrapesJS核心团队和社区的支持。如果遇到问题，可以查看 GrapesJS/react 上的 GitHub issue，或者在论坛/Stack Overflow 提问，得到假设你用的是官方方法的答案。相反，如果你自己掷积分，可能就得自己解决某些问题。
有什么理由 不 使用包装纸吗？ 大多数情况下，建议使用包装纸。不过，如果你有非常自定义的场景，需要严格控制 GrapesJS 初始化的时间（比如响应某个用户操作，且在组件渲染流之外），或者你已有基于不同集成构建的代码库，你可能会坚持手动初始化。另外，如果你的使用场景非常有限（比如只是把GrapesJS挂载到普通HTML页面上），添加React可能根本没有必要。但对于任何已经使用 React/Next 的中大型应用来说，封装器显然是集成的优势。
结论
由于@grapesjs/react包，将GrapesJS集成到现代Next.js 13+应用中变得更加简单。我们讲解了如何在React组件中设置GrapesJS编辑器，在Next的App Router架构中使用，并通过插件和自定义块进行扩展。我们还讨论了样式的最佳实践（善用Canvas iframe）、性能考虑，以及如何避免常见陷阱如SSR问题和内存泄漏。
通过这种设置，你可以将功能齐全的可视化页面构建器嵌入到你的React应用中——无论是CMS、新闻通讯构建器，还是产品中的页面个性化工具。已经熟悉 GrapesJS 的开发者会欣赏到所有强大的 API（命令、组件、存储等）依然可用，并且现在可以通过支持 React 的界面访问。
下一步： 既然你已经在 React 中运行了 GrapesJS，或许可以进一步探索：
- 持久化数据： 可以了解一下GrapesJS的Storage Manager API，可以把编辑器内容保存并加载到数据库或后端。在Next.js应用中，你可以创建一个API路由来保存editor.getProjectData（） JSON。
- 自定义插件： 如果现有插件不满足你的需求，可以考虑自己写一个GrapesJS插件。GrapesJS的文档里有关于创建插件的指南。然后你可以像我们之前用 preset-webpage 一样，导入并使用你的插件到 React 集成中。
- 延伸阅读： 请查看GrapesJS官方博客和发布说明获取最新消息。例如，最近发布的版本强调了 React 19 支持、Icon 和 VirtualList 等新组件，以及文档改进。保持最新动态有助于你及时利用新的性能改进和新功能。
结合GrapesJS丰富的编辑器功能和Next.js强大的应用框架，您可以将优秀的编辑体验集成到您的网页应用中。祝你用GrapesJS和React搭建愉快！