前言

Next.js最大的优势之一就是部署极其方便。官方团队就是做部署网站Vercel的。 所以你用Next.js，就等于半只脚踩进了“一键部署”的门槛。 但这不代表你可以随便扔到服务器就跑。部署姿势不对，照样卡成狗。

今天我们讲两种部署方式：无脑简单版 和 手搓硬核版还有上线前必做的调整。

一、Vercel部署：连命令都不用记

Vercel是Next.js的亲爹。你把代码推到GitHub/GitLab，Vercel自动建立、部署、给CDN、给HTTPS。甚至自动给你一个.vercel.app域名。

步骤

1. 把代码推到Git仓库。
2. 登录vercel.com，用GitHub账号登录。
3. 点击“Import Project”，选择你的仓库。
4. 默认配置，点击Deploy。
5. 几十秒后你会得到一个链接 https://你的项目.vercel.app已经上线了。

之后每次git push,Vercel自动重新部署。你连服务器都不用买，

优点:

• 零运维、自动HTTPS、全球CDN、自动调整、免费额度够用。
• 从缺点来看，自带域名在国内访问可能慢。流量超了要付费，怎么说呢，

生活比喻:

你把菜做好,递给外卖骑手,他帮你送到客户手里,什么都不用管.

二、自托管：更自由但更折腾

再看方案一，Node.js服务器运行

npm run build #建立生产版本
npm start #启动Node服务器

接下来用Nginx反向代理,配置HTTPS.注意:需要管理进程,自己配置CDN,自己处理日志.
pm2 start npm --name nextjs --start 

方案二的观点是，静态导出


如果所有页面都使用了getStaticProps,可以导出纯静态文件放入OSS或其他托管.
next build && next export

生成out文件夹直接扔入任意静态托管如阿里云OSS+CDN超便宜快速.
缺点不能使用getServerSideProps等特性.
超级简单

方案三的观点是。Docker容器化

写入Dockerfile建立镜像跑在K8s/Docker Compose环境:
pre> font组件让文字渲染更快流畅
h3 . 脚本使用next/script 控制第三方脚本加载时机不阻塞页面:
pre> script让追踪/广告代码不会影响首屏渲染速度
再看开启压缩，在config中添加compress选项:

移除未使用CSS:

如果Tailwind默认清理 CSS可以考虑purgecss插件减少冗余样式体积.

从设置缓存头来看，


启用增量静态再生ISR:
非所有页面都要getServerSideProps 能够getStaticProps+revalidate尽量采用
exportasyncfunction getStaticProps{return{props:{data},revalidate:
//重新验证时间秒单位}};老实说，
四.性能监控别靠猜
部署后使用Vercel Analytics付费或Google Lighthouse CI定期测试
集成Sentry监控运行时错误:
npminstall@sentry/nextjs

/>
五.