使用服务端渲染的NextJS应用如何上传部署至FTP账号？

核心差异说明 #

create-react-app属于纯客户端渲染框架，构建后生成的是全静态资源，因此可以直接上传到FTP目录做静态托管。但你在项目中使用了getServerSideProps实现服务端渲染，项目需要运行时的服务端逻辑支持，因此无法用纯静态FTP的方式部署，需要在你的自有服务器上安装Node.js环境运行Next.js服务。
你执行npm run build后没有找到build文件夹是正常情况：Next.js的默认构建产物是根目录下的.next隐藏文件夹，而非create-react-app的build文件夹。

自有服务器部署步骤 #

• 本地执行构建
  先在本地项目根目录运行npm run build，确认构建成功后，准备好以下需要上传的文件/文件夹：
  • 生成的.next文件夹
  • 项目根目录的package.json、package-lock.json（或yarn.lock、pnpm-lock.yaml）
  • 存放静态资源的public文件夹（如果有）
    不需要上传本地的node_modules文件夹。
• 上传文件到服务器
  将上述准备好的文件/文件夹上传到你的服务器指定目录，比如/var/www/your-next-project。
• 服务器安装生产依赖
  登录服务器进入对应项目目录，运行npm install --production仅安装生产环境需要的依赖。
• 启动生产服务
  直接运行npm start即可启动Next.js生产服务，默认监听3000端口。如果需要让服务后台常驻运行，可使用pm2做进程管理：
  1. 全局安装pm2：npm install pm2 -g
  2. 启动服务：pm2 start npm --name "你的项目名称" -- start
• 配置反向代理（可选）
  如果需要通过80/443端口对外提供服务，可使用Nginx做反向代理，将域名的请求转发到本地127.0.0.1:3000即可，还可在Nginx侧配置SSL证书、静态资源缓存规则提升访问性能。

静态部署替代方案 #

如果后续你可以放弃服务端渲染能力，可将getServerSideProps替换为getStaticProps+getStaticPaths实现静态站点生成，此时运行npm run export即可导出纯静态的out文件夹，该文件夹的作用和create-react-app的build文件夹完全一致，可以直接上传到FTP目录做静态托管。

内容的提问来源于stack exchange，提问作者Bruce Chamoff