• 时间:
  • 分类:

你在本地npm run dev，页面秒开，爽得不行。一部署到服务器，慢得像老太太过马路，图片加载半天，首屏白屏几秒，用户投诉。今天我们就来把Next.js应用“送上天”——从部署到优化，让你的线上应用和本地一样快。而且，还能免费蹭HTTPS和CDN。

前言

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

今天我们讲两种部署方式：无脑简单版（Vercel） 和 手搓硬核版（自托管），以及上线前必做的优化。

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

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

步骤：

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

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

优点：零运维、自动HTTPS、全球CDN、自动优化（图片、字体）、免费额度够用（个人项目）。
缺点：自带域名在国内访问可能慢（但可绑定自己的域名，解析到国内CDN节点）。流量超了要付费。

生活比喻：你把菜做好，递给外卖骑手，他帮你送到客户手里，你什么都不用管。

二、自托管（自己买服务器）：更自由但更折腾

如果你必须用国内服务器、或者公司要求私有化部署，那就得自己搭。

方案一：Node.js服务器运行

npm run build   # 构建生产版本
npm start       # 启动Node服务器（默认3000端口）

然后用Nginx反向代理，配置HTTPS。注意：你需要自己管理进程（用PM2），自己配置CDN，自己处理日志。

pm2 start npm --name "nextjs" -- start

方案二：静态导出（如果全站都是SSG）

如果你的所有页面都用了getStaticProps（没有getServerSideProps），可以导出纯静态文件，放到Nginx或OSS上。

next build && next export

会生成out文件夹，直接扔到任意静态托管（如阿里云OSS + CDN），超便宜，超快。

缺点：不能用getServerSideProps、API Routes等服务器特性。

方案三：Docker容器化

写Dockerfile，构建镜像，跑在K8s或Docker Compose上。

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、响应式。你啥都不用做，图片体积直接小一半。

import Image from 'next/image';
<Image src="/hero.png" width={1200} height={600} alt="Hero" />

坑：宽高必须指定，或者用layout="fill" + 父容器相对定位。

2. 字体用next/font

Next.js 13+内置字体优化，自动内联CSS、避免布局偏移。

import { Inter } from 'next/font/google';
const inter = Inter({ subsets: ['latin'] });
<html className={inter.className}>

3. 脚本用next/script

控制第三方脚本加载时机，不阻塞页面。

import Script from 'next/script';
<Script src="https://example.com/tracker.js" strategy="afterInteractive" />

4. 开启压缩（Vercel默认开启，自托管需配置）

在next.config.js中：

module.exports = {
  compress: true, // 开启gzip，Nginx也要配
};

5. 移除未使用的CSS（结合Tailwind或PurgeCSS）

如果你用Tailwind，默认已清理。如果用普通CSS，可以考虑@fullhuman/postcss-purgecss。

6. 设置缓存头

自托管时，在Nginx里对静态资源（_next/static）设置永久缓存：

location /_next/static {
  expires 1y;
  add_header Cache-Control "public, immutable";
}

7. 启用增量静态再生（ISR）

不需要每个页面都getServerSideProps，能用getStaticProps + revalidate尽量用。

export async function getStaticProps() {
  return { props: { data }, revalidate: 60 };
}

四、性能监控：别靠猜

部署后，用Vercel Analytics（付费）或自建Google Lighthouse CI，定期跑分。也可以集成Sentry监控运行时错误。

npm install @sentry/nextjs

配置后，线上报错自动发到Sentry，不用等用户骂你。

五、总结：从开发到上线，一条龙

  • 个人项目/创业公司：无脑用Vercel，省下的时间写代码。
  • 企业自托管：用Node.js + PM2 + Nginx，或Docker + K8s。
  • 纯静态站点：next export扔OSS。
  • 优化必做：图片、字体、压缩、缓存、ISR。

做了这些，你的Next.js应用就能从“本地火箭”变成“太空飞船”。用户打开，秒开；谷歌爬虫，狂喜；老板看数据，点头。

标签: none

添加新评论