你在本地
npm run dev，页面秒开，爽得不行。一部署到服务器，慢得像老太太过马路，图片加载半天，首屏白屏几秒，用户投诉。今天我们就来把Next.js应用"送上天"------从部署到优化，让你的线上应用和本地一样快。而且，还能免费蹭HTTPS和CDN。
前言
Next.js最大的优势之一就是部署极其方便。官方团队就是做部署平台Vercel的，所以你用Next.js，就等于半只脚踩进了"一键部署"的门槛。但这不代表你可以随便扔到服务器就跑。部署姿势不对，照样卡成狗。
今天我们讲两种部署方式：无脑简单版（Vercel） 和 手搓硬核版（自托管），以及上线前必做的优化。
一、Vercel部署：连命令都不用记
Vercel是Next.js的亲爹（母公司）。你把代码推到GitHub/GitLab，Vercel自动构建、部署、给CDN、给HTTPS，甚至自动给你一个.vercel.app域名。
步骤：
- 把代码推到Git仓库。
- 登录vercel.com，用GitHub账号登录。
- 点击"Import Project"，选择你的仓库。
- 默认配置（Next.js自动识别），点击Deploy。
- 几十秒后，你会得到一个链接
https://你的项目.vercel.app，已经上线了。
之后每次git push，Vercel自动重新部署。你连服务器都不用买。
优点 ：零运维、自动HTTPS、全球CDN、自动优化（图片、字体）、免费额度够用（个人项目）。
缺点：自带域名在国内访问可能慢（但可绑定自己的域名，解析到国内CDN节点）。流量超了要付费。
生活比喻：你把菜做好，递给外卖骑手，他帮你送到客户手里，你什么都不用管。
二、自托管（自己买服务器）：更自由但更折腾
如果你必须用国内服务器、或者公司要求私有化部署，那就得自己搭。
方案一：Node.js服务器运行
bash
npm run build # 构建生产版本
npm start # 启动Node服务器（默认3000端口）然后用Nginx反向代理，配置HTTPS。注意：你需要自己管理进程（用PM2），自己配置CDN，自己处理日志。
bash
pm2 start npm --name "nextjs" -- start方案二：静态导出（如果全站都是SSG）
如果你的所有页面都用了getStaticProps（没有getServerSideProps），可以导出纯静态文件，放到Nginx或OSS上。
bash
next build && next export会生成out文件夹，直接扔到任意静态托管（如阿里云OSS + CDN），超便宜，超快。
缺点 ：不能用getServerSideProps、API Routes等服务器特性。
方案三：Docker容器化
写Dockerfile，构建镜像，跑在K8s或Docker Compose上。
dockerfile
FROM node:18-alpine
WORKDIR /app
COPY package*.json ./
RUN npm ci
COPY . .
RUN npm run build
EXPOSE 3000
CMD ["npm", "start"]适合云原生环境。
三、上线前必做的优化：让Next.js飞起来
1. 图片用next/image，别用<img>
next/image自动压缩、懒加载、转webp、响应式。你啥都不用做，图片体积直接小一半。
jsx
import Image from 'next/image';
<Image src="/hero.png" width={1200} height={600} alt="Hero" />坑 ：宽高必须指定，或者用layout="fill" + 父容器相对定位。
2. 字体用next/font
Next.js 13+内置字体优化，自动内联CSS、避免布局偏移。
jsx
import { Inter } from 'next/font/google';
const inter = Inter({ subsets: ['latin'] });
<html className={inter.className}>3. 脚本用next/script
控制第三方脚本加载时机，不阻塞页面。
jsx
import Script from 'next/script';
<Script src="https://example.com/tracker.js" strategy="afterInteractive" />4. 开启压缩（Vercel默认开启，自托管需配置）
在next.config.js中：
js
module.exports = {
compress: true, // 开启gzip，Nginx也要配
};5. 移除未使用的CSS（结合Tailwind或PurgeCSS）
如果你用Tailwind，默认已清理。如果用普通CSS，可以考虑@fullhuman/postcss-purgecss。
6. 设置缓存头
自托管时，在Nginx里对静态资源（_next/static）设置永久缓存：
nginx
location /_next/static {
expires 1y;
add_header Cache-Control "public, immutable";
}7. 启用增量静态再生（ISR）
不需要每个页面都getServerSideProps，能用getStaticProps + revalidate尽量用。
js
export async function getStaticProps() {
return { props: { data }, revalidate: 60 };
}四、性能监控：别靠猜
部署后，用Vercel Analytics （付费）或自建Google Lighthouse CI ，定期跑分。也可以集成Sentry监控运行时错误。
bash
npm install @sentry/nextjs配置后，线上报错自动发到Sentry，不用等用户骂你。
五、总结：从开发到上线，一条龙
- 个人项目/创业公司：无脑用Vercel，省下的时间写代码。
- 企业自托管：用Node.js + PM2 + Nginx，或Docker + K8s。
- 纯静态站点 ：
next export扔OSS。 - 优化必做：图片、字体、压缩、缓存、ISR。
做了这些，你的Next.js应用就能从"本地火箭"变成"太空飞船"。用户打开，秒开；谷歌爬虫，狂喜；老板看数据，点头。