使用 Next.js 12 和 Cosmic 构建一个可以上线的餐厅网站

译者 | 吴河东,审校 | 孙淑娟 梁策,​​Next.js​​ - 用于生产的 React 框架，可以轻松地启动全栈应用程序。,​​Cosmic​​ - 无头部 CMS工具，它实现了数据(内容)层的独立性，并使我们能够快速管理网站内容。,​​Sass ​​- 一种稳定、强大的专业级 CSS 扩展语言。,Next.js是一个完整的套件，用于构建超快的 React 应用程序。它对开发人员友好，使用轻松。随着​​Next.js 12.1​​的发布，性能优化、中间件、React 18 支持、按需 ISR、对 SWC 的扩展支持等新功能只会变得更好。,Cosmic是一款出色的无头 CMS，它使我们能够全面管理和存储网站内容和媒体，并进行快速更新。,先安装一个新的包含工具和配置的​​ Next.js应用程序​​​。本教程中使用​​Node.js ​​12.22.0 或更高版本。,打开终端，输入：,在浏览器中打开 ​​*http://localhost:3000/*以查看主页​​。,Next.js 12 的关键特性之一是性能优化。为了提高性能，Next.js 用可扩展的 Rust 编译器替换了 Babel 编译器，并默认使用 Next.js 12 启用它，该​​编译器构建​​​在​​SWC​​(Speedy Web Compiler)之上，它支持SWC。它可以将TypeScript和JavaScript转化为可以在旧浏览器上运行的 JavaScript 代码。,SWC 在单线程上比 Babel 快 20 倍，在四核上快 70 倍。,这是最令人兴奋的功能之一。中间件使我们能够使用代码而不是配置。这意味着你可以在请求完成之前运行代码，并根据请求，你可以通过重写、重定向、添加标头、设置 Cookie 等来修改响应。通过中间件，你可以实现​​身份验证、机器人保护、重定向、重写、服务器端分析、日志记录和处理不受支持的浏览器​​等。,中间件被创建在 /pages/_middleware.ts ，它将在/pages目录中的所有路由上运行。_middleware.js文件长什么样?让我们以我们的模板为例。,Next.js 公开了一个函数unstable_revalidate()，允许你使用getStaticProps重新授权各个页面。在getStaticProps中，你不需要指定 revalidate 来按需重新验证，只需要在unstable_revalidate()调用时按需重新验证页面。,内置的图像优化API已更新以支持与ISR页面相同的模式，即在后台提供过时的图像并重新验证。此外，它还支持 AVIF 图像，使图像比 WebP 小 20%。,此功能是可选的，在编辑图片配置的时候可以选择启用。在文件next.config.js中配置下面参数即可：,第一步创建​​免费的 Cosmic 帐户​​。让我们选择“从头开始”(Start from scratch)选项。,现在让我们将内容放进groups，用Object Type来共享组里的内容。例如，部分名称、标题、简介和图片等具有类似属性的部分，这些模块希望得到复用以为不同部分创建内容。,创建Object Type并添加部分属性用来在“Content Model”中定义“Metafields”。,现在，你可以为部分创建一个Object Type模型，并且可以像这样填充内容。,以类似的方式，你可以按照当前的数据模型、架构设计定义模块并创建Object Type：,将 Cosmic 模块安装到 Next.js 应用程序中。,然后，转到 Cosmic 面板 Your Bucket > Settings > API Access并找到你的 Bucket slug 和 API 读取密钥。,将此 Bucket slug 和 API 读取密钥添加到你的 Next.js 应用程序.env中。,要使用模板 UI，你需要在​​GitHub​​中将它克隆。打开终端，粘贴或键入此代码以安装所有依赖项，然后运行它。,向我们之前在 Cosmic 面板中创建的函数getDataFromBucket请求，并按类型从 Cosmic 中获取我们创建的内容params。,显示我们的内容，将其与我们的 UI 集成，并将一些元素呈现到主页。为此，你需要将此添加到index.js。,下面函数chooseByType将过滤我们在 Cosmic 面板中创建的 Object Type。(Slug),在 Next.js 中，你可以创建动态路由，可以考虑用下面pages/menu/[slug].js页面来创建单个菜单项页面和动态路由：,该函数getServerSideProps用于每次调用此路由时从 Cosmic 获取数据。在pages/api/revalidate.js中，我们在unstable_revalidate()被调用时使用unstable_revalidate函数来按需重新验证页面。如果出现错误，Next.js 将继续显示最后成功生成的页面。,在​​Vercel​​上部署代码库后，你可以通过转到 Cosmic 面板并导航到Bucket Settings > Webhooks来启用内容更新的重新验证。编辑内容时要触发的事件是object.edited.published。Webhook URL 端点将如下所示：${YOUR_VERCEL_DEPLOYMENT_URL}/api/revalidate。,这也使得在创建或更新来自无头部的CMS 的内容时，你的网站更容易更新。,现在来测试一下，在 Cosmic 面板中编辑内容，并查看静态内容立即更新。,现在，你已拥有一个动态的、可定制的、完全集成的模板，其中包含新的 Next.js 和 Cosmic 功能。你可以为其他类型的企业定制，并按照自己的喜好来使用。,吴河东，51CTO社区编辑，具有5年工作经验，从事电商相关IT工作。擅长后台开发，大数据，算法等。,原文标题：​​Build a Production Ready Restaurant Website with Next.js 12 and Cosmic​​，作者：Naira Gezhoyan,