如何把 Next.js 项目部署到服务器?

软件发布|下载排行|最新软件

当前位置:首页IT学院IT技术

如何把 Next.js 项目部署到服务器?

21云盒子   2020-12-30 我要评论

Next.js 是什么?

Next.js 是一个用于 生产环境的 React 框架。Next.js 为您提供生产环境所需的所有功能以及最佳的开发体验:包括静态及服务器端融合渲染、 支持 TypeScript、智能化打包、 路由预取等功能 无需任何配置。

Next.js 官网截图

21云盒提供了速简单的Next.js部署方法,你可以在21云盒子上通过以静态网页或以Node Server的方式进行部署。

两者的区别在于, 当以静态网页方式进行部署时,流程是项目会被构建(打包),然后把最终生成的静态资源(HTML, CSS, JS, 图片等) 部署到全国各地的CDN节点。而当以Node Server的方式进行部署时,流程是先进行项目构建,静态资源部署到全国竹木水口地的CDN节点,然后服务启动进入等待被访问的状态,当有访问到服务请求时,服务器会进行处理。

现在可以进行实际操作:

  1. 注册成为21云盒子会员
  2. Fork Next.js示例
  3. 选以下的方式进行部署

以静态网页方式进行部署

环境静态网页
构建命令 yarn && yarn build && yarn next export
发布目录 out

如果你不确定怎样操作,可以参考:

一步一步演示怎样部署Next.js到服务器(SSG/静态页)操作视频

以Node服务端方式进行部署

环境Node 12.19
构建命令 yarn && yarn build
发布目录 yarn next start --port 10000

如果你不确定怎样操作,可以参考:

一步一步演示怎样部署Next.js到服务器(SSR/后端)

为什么部署在21云盒子?

原因 1: 方便

21云盒子创立至今,在国内第一家真正提供了像 Netlify, Heroku 等轻松部署的功能,同时也保证了服务的速度和稳定性。 每个云服务项目,只需要在首次完成 2 项配置,后续当你Git Push代码,21云盒子就会帮你完成自动部署。

原因 2: 21云盒子稳定,提供网站备案方案

如果你的网站现在使用的是 Netlify, Vercel, Gatsby Cloud等服务,国内用户将没办法访问。

为什么呢? 根据国家工信部的要求,所有在国内上线的网站都必先完成备案, 但国外的云服务平台不提供国内的的备案,所以部署在国外的云服务平台,或许能暂时访问,但长远来看,会非常不稳定。

原因 3: 国内极速访问

再好的服务,如果打开速度太慢,还是没办法使用的。在21云盒子上部署的云服务,一键实现部署全国各地的CDN节点。以面是和国外各大服务比较的案例:

  • 21云盒子 vs Netlify

  • 21云盒子 vs Vercel

  • 21云盒子 vs Heroku

  • 21云盒子 vs Github Pages

官方博客地址: https://www.21yunbox.com/blog/solutions/how-to-deploy-nextjs-project-in-production-server.html

Copyright 2022 版权所有 软件发布 访问手机版

声明:所有软件和文章来自软件开发商或者作者 如有异议 请与本站联系 联系我们