本文是本系列的最后一篇,介绍如何部署Next.js应用。
部署前准备
部署前要进行本地化部署,如果本地有错,部署过程也会出错。
npm run build
提示GoogleAnalyticsScript出错,需要加上id。我们就加上。
再运行npm run build。还是出错。提醒: “authOptions” is not a valid Route export field。在api的route.tsx,只允许导出GET、POST等函数,很简单,我们将其独立出来。相关的依赖关系也作相应调整。
接着,继续运行 npm run build,根据发现的错误进行修复,比如发现product模型不存在了,因为之前我们已调整删除了,这里需要删除整个products文件夹;user模型的id已是string类型不用转成number了。
具体不细列了,总之需要运行npm run build确保没有任何错误。
然后进行提交。”Fix build errors”
将代码推送到Github
在Github创建一个存储库 next-course。
复制代码并在vscode控制台运行。
首次同步需要用户密码,可以生成access token,然后可以输入用户名和access token作为凭据。一般不建议token永不过期。默认30天就很不错。注意选中repo,表示可以同步存储库。
部署到 Vercel
我们选择部署在Vercel。
登录vercel.com,新建项目,并选择从github导入next-course。可以设置项目名称、框架、目录等,最重要的可能是环境变量,比如MySQL的数据库,digital ocean, google CLoud platform, MS Azure, Hostinger, GoDaddy等都能提供MySQL服务,相关的Key等,为了安全,要保证正式部署的环境变量与开发环境的环境变量不同。
然后点 “Deploy” 部署等待部署。发现是有错误的,我们需要处理。
排除部署错误
查看错误提示,做相应的处理。
在这里,我们添加 npx prisma generate指令;安装 npm i -D encoding,再提交到github,“ Add encoding”。并暂时删除send-email文件夹处理。
部置成功后, 生成随机的一个的地址,并可以进行访问。
小结
本篇简要介绍了如何部署Next.js应用,只是让大家了解大致过程。本篇也是本系列的最后一篇,感谢一路关注的朋友,希望本系列内容对您有帮助。