生成静态网站并向最终用户提供服务

[asikurrahmanshuvo]

此应用程序使用领先的 React 框架 Next.js 构建。该框架允许我们充分利用静态站点生成并提供预览模式。预览模式可以绕过 SSG 并通过任何数据获取解决方案在服务器端呈现草稿页面。这意味着我们不必运行完整构建即可查看页面预览。如果您正在为 Web 应用程序使用内容管理系统 (CMS)，并且您的团队希望在提交更改之前检查其内容可能是什么样子，那么这是理想的选择。

Next.js 托管和部署：Netlify
我们将使用 Netlify 构建和托管网站。Netlify通过为我们提供额外的开发人员体验优势以及发布管理工具来增强 Next.js 的功能。它还提供出色的 Next.js 支持，包括对 Next.js 预览模式的完全支持，这在本教程中非常重要。

数字体验管理：Magnolia DXP
Magnolia 是内容中心和数字体验平台 (DXP)。其可视化 SPA 编辑器将现代 SPA 架构与传统页面编辑器的概念相结合，让内容作者能够以所见即所得的方式创建体验。

Magnolia 还可以集成来自数字资产管理 (DAM) 系统、电子商务平台或任 以色列 Whatsapp 数据 何其他第三方系统的数据和内容，为非技术用户提供一个管理数字体验的中央枢纽。

Next.js
我为该应用程序编写的 Next.js 代码提供了二合一解决方案，您可以在 GitHub 上找到它。

静态站点生成
Next.js 可以将您的 Next.js 应用程序导出为静态 HTML 文件，无需 Node.js 服务器即可运行。

我使用了getStaticProps和getStaticPaths来生成静态站点。以下是它们在 repo 中的位置链接以及每个函数的作用：

getStaticProps- 从无头 CMS 获取页面内容
getStaticPaths- 返回页面站点地图，告诉 Next.js 要构建哪些页面
预览模式
要了解 Next.js 预览模式的工作原理，我建议您查看以下脚本：

调用setPreviewData响应对象会设置预览 cookie。Next.js 会将所有包含此特定 cookie 的请求视为预览请求。

我们传递的参数setPreviewData应该是一个对象。我们稍后可以使用它getStaticProps来检索其内容。