吴冬冬审稿人|SunShujuanLiangCe使用工具Next.js-React生产框架，可以轻松推出全栈应用。Cosmic-HeadlessCMS工具，实现了数据（内容）层的独立性，使我们能够快速管理网站内容。Sass-一种稳定、强大、专业级的CSS扩展语言。相关资源代码现场演示安装应用程序模板相关工具简介Next.js是用于构建速度极快的React应用程序的完整套件。它对开发人员友好且易于使用。随着Next.js12.1的发布，性能优化、中间件、React18支持、按需ISR、对SWC的扩展支持等新功能只会变得更好。Cosmic是一款出色的无头CMS，它使我们能够通过快速更新来全面管理和存储网站内容和媒体。探索4个新的Next.js杀手级功能并将它们用于模板首先安装一个带有工具和配置的新Next.js应用程序。本教程使用Node.js12.22.0或更高版本。打开终端，输入：npxcreate-next-app@latestnextjs-restaurant-website-cms#oryarncreatenext-appnextjs-restaurant-website-cms安装依赖cdnextjs-restaurant-website-cmsnpmi#orcdnextjs-restaurant-website-cmsyarnstartrunnpmrundev#oryarndev在浏览器中打开*http://localhost:3000/*查看首页。1.Rust编译器Next.js12的关键特性之一是性能优化。为了提高性能，Next.js用可扩展的Rust编译器替换了Babel编译器，并默认使用Next.js12启用它，它构建在SWC（SpeedyWebCompiler）之上，支持SWC。它将TypeScript和JavaScript转换为可以在旧版浏览器上运行的JavaScript代码。SWC在单线程上比Babel快20倍，在四核上快70倍。2.中间件这是最令人兴奋的特性之一。中间件使我们能够使用代码而不是配置。这意味着您可以在请求完成之前运行代码，并且根据请求，您可以通过重写、重定向、添加标头、设置cookie等来修改响应。使用中间件，您可以实现身份验证、机器人保护、重定向、重写、服务器端分析、日志记录和处理不支持的浏览器等。中间件在/pages/_middleware.ts中创建，它将在/pages目录中的所有路由上运行。_middleware.js文件是什么样的？让我们以我们的模板为例。//pages/_middleware.jsimport{NextResponse}from'next/server';exportasyncfunctionmiddleware(request){//创建类的实例以访问公共方法。//这里使用了next()，让response=NextResponse.next();常量国家=request.geo.country||'我们';常量城市=request.geo.city||'旧金山';常量区域=request.geo.region||'CA';//从请求中获取cookiesletcookieFromRequest=request.cookies['location-cookie'];if(!cookieFromRequest){//设置`cookie`response.cookie('location-cookie',`${country|city|region}`);}returnresponse;}3.按需增量静态重新生成ISRNext.js公开了一个函数unstable_revalidate()，允许您使用getStaticProps对单个页面重新授权。在getStaticProps中不需要指定revalidate为按需重新生效，只需要在调用unstable_revalidate()时按需重新生效页面即可。//pages/api/revalidate.jsexportdefaultasyncfunctionhandler(req,res){try{awaitres.unstable_revalidate('/menu/'+req.body.data.slug)returnres.json({revalidated:true})}catch(err){//如果出现错误，Next.js将继续//显示最后成功生成的页面returnres.status(500).send('Errorrevalidating')}}4.使用AVIF启用更快的图像优化和更小的图像内置图像优化API已更新以支持与ISR页面相同的模式，即在后台提供过时图像并重新验证。另外，它支持AVIF图像，使图像比WebP小20%。此功能是可选的，可以在编辑图像配置时启用。只需在文件next.config.js中配置以下参数：//next.config.jsconstnextConfig={reactStrictMode:true,images:{formats:['image/avif','image/webp'],domains:['imgix.cosmicjs.com'],},}module.exports=nextConfigCosmic功能概述可定制的API：用户定义的API架构、模型和控制器。为了方便起见，Cosmic同时提供了REST和GraphQLAPI方法。快速安全的内容管理系统和API工具包。Webhooks在您需要的任何地方回调以获得您想要的功能，开箱即用的CosmicAPI。包含Imgix集成，可让您对针对跨平台体验优化的动态应用程序进行强大的图像处理。Cosmic运营第一步是创建一个免费的Cosmic帐户。让我们选择“从头开始”选项。现在让我们将内容放入组中，并使用对象类型在组中共享内容。例如，栏目名称、标题、介绍、图片等属性相似的栏目，这些模块有望被复用，为不同的栏目创建内容。创建对象类型并添加一些属性以在“内容模型”中定义“元字段”。现在，您可以为该部分创建一个对象类型模型，它可以像这样填充内容。以类似的方式，您可以根据您当前的数据模型定义模块和创建对象类型，模式设计：单一模型用于单个模型多个用于可重用模型TimetogetvaluesforNext.jsapplicationsInstalltheCosmicmoduleintotheNext..js应用程序。npmicosmicjs#oryarnaddcosmicjs然后，转到Cosmic面板YourBucket>Settings>APIAccess并找到你的Bucketslug和APIreadkey。将此Bucketslug和API读取密钥添加到您的Next.js应用程序.env。//.envCOSMIC_BUCKET_SLUG=your_cosmic_slugCOSMIC_READ_KEY=your_cosmic_read_key要使用模板UI，您需要在GitHub中克隆它。打开终端，粘贴或键入此代码以安装所有依赖项，然后运行它。gitclonehttps://github.com/cosmicjs/nextjs-restaurant-website-cms.gitcdnextjs-restaurant-website-cmsnpminstall#oryarninstallnpmrundev#oryarndev请求我们之前在Cosmic面板中创建的函数getDataFromBucket，并按类型获取我们从Cosmic创建的内容参数。//src/lib/api.jsimportCosmicfrom'cosmicjs';constBUCKET_SLUG=process.env.COSMIC_BUCKET_SLUGconstREAD_KEY=process.env.COSMIC_READ_KEYconstbucket=Cosmic().bucket({slug:BUCKET_SLUG,read_key:READ_KEY,});exportasyncfunctiongetDataFromBucket(preview){constparams={type:'header',props:'title,slug,metadata,created_at',sort:'-created_at',...(preview&&{status:'all'}),}constdata=awaitbucket.getObjects(params)returndata.objects}显示我们的内容，将其与我们的UI集成，并将一些元素呈现到主页。为此，您需要将其添加到index.js。//pages/index.jsimportHeadfrom'next/head';importHomefrom'components/Home';importLayoutfrom'components/Layout';importFooterfrom'components/Footer';importAboutUsfrom'components/AboutUs';从'components/Menu'导入SpacialMenu;从'components/Introduction'导入介绍;从'components/VideoIntro'导入VideoIntro;从'components/Gallery'导入图库;从'components/Contact'导入联系人;导入{getDataFromBucket}从'lib/api';从'utils/chooseValueByType'导入chooseByType;函数模板（{数据}）{返回（<>
