丰富的线上&线下活动，深入探索云世界
做任务，得社区积分和周边
最真实的开发者用云体验
让每位学生受益于普惠算力
让创作激发创新
资深技术专家手把手带教
遇见技术追梦人
技术交流，直击现场
海量开发者使用工具、手册，免费下载
极速、全面、稳定、安全的开源镜像
开发手册、白皮书、案例集等实战精华
为开发者定制的Chrome浏览器插件
首先我们使用create-next-app创建一个新的next项目
yarnadd--devtailwindcsspostcssautoprefixer@tailwindcss/typographynpxtailwindcssinit-p接下来将pages和styles文件夹重新移动到src目录下，这一步是我个人习惯。
修改tailwindcss.config.js
然后修改styles/globals.css中css为tailwindcss的指令
@tailwindbase;@tailwindcomponents;@tailwindutilities;修改index.js中的代码测试下tailwindcss是否配置成功
至此项目初始化成功。
之前我们在小程序中设计好了云数据，并且可以在小程序中请求数据，下面这个接口对应数据库中的题目表
exportinterfaceQuestion{_id:string;category:string;//分类title:string;//标题desc:string;//简介options:string;//选项，选择题explanation:string;//答案解析level:number;//难度等级tagId:number;//标签}我们原来的的云函数代码如下，用于请求题目列表
exports.main=async(event,context)=>{constdb=uniCloud.database();constpage=event.page||1;constres=awaitdb.collection('fe-question').skip((page-1)*20).limit(20).get();//返回数据给客户端returnres.data};在uniapp中可以使用uniCloud.callFunction方法直接请求数据，那么在Next.js项目中要如何请求数据呢？
注意：path应该以/开头，例如：/functionName
在云函数中，不同的调用方式在context.SOURCE中可以获得不同的参数
为了能够让搜索引擎收录内容，我们选择服务端渲染，在Next.js中，可以再导出一个函数getServerSideProps，这个函数名称是Next.js固定的，不可以写错哦。
当我在部署成功后，发现部署成功后发现接口很慢，每次请求需要2s以上
但是我本地开发的时候却很快，基本都在200ms以内，这是什么原因呢？
其实vercel部署的时候会把getServerSideProps中方法部署为serverless云函数。
当然我们可以在Vercel中设置serverless的Region为香港，这样稍微可以快点。
本文通过一个实现一个面试刷题网站，讲述了Next.js和云开发部署的全过程，至此，你也成为了一名全栈工程师。
Next.jsssr渲染方式需要在2个Region之间的请求数据，相对来说请求速度较慢。
最后为了权衡访问速度和SEO，最终我放弃使用ssr的渲染方式，直接使用客户端渲染，别忘了Next.js不但支持ssr还支持csr。我的这个网站也开源了，包含一些前端常用工具，还可以在线刷面试题。