接下来安装Builder的依赖项：
是Builder 的 React SDK。有了它，您可以获取在 Builder 的可视化编辑器中设计的页面，并在 Next.js 页面模板中呈现它们。@builder.io/personalization-utils是一个轻量级实用程序库，可以更轻松地编写必要的中间件。两者都是完全开源的。
现在，您可以使用以下命令启动开发服务器。将其替换为您的 Builder 帐户的公共 API 密钥，您可以在帐户设置YOUR_API_KEY下找到该密钥：
BUILDER_API_KEY=YOUR_API_KEY npm run dev
第 2 步：
在 Builder 中创建拖放页面之前，您需要将Builder 与您的网站集成。
这是因为，在可视化编辑器中设计页面时，Builder 会实时预览嵌入在网站页面模板中的内容，以及网站的所有 CSS 和该页面上任何不受 Builder 管理的内容。集成是实时预览发挥作用的魔力所在。
首先，登录您的 Builder 帐户并单击左侧导航栏中 卢森堡 Whatsapp 数据 的“模型” 。单击“添加/编辑模型”，然后单击“页面模型”。
在模型选项页面上，将预览 URL 编辑为。Builder 的可视化编辑器现在将在编辑时在 Next.js 索引页中呈现您的内容。
选择 Builder.io 模型选项
完成后单击“保存” 。
现在让我们编写您的应用程序获取个性化数据所需的中间件。
步骤 3：创建中间件
Next.js 支持中间件，即可以任意重写用户对你网站的请求的函数。
将下面的中间件代码复制并粘贴到名为 pages/_middleware.js 的新文件中：
上面的例子执行以下操作：