在学习完前面所有的课程后,我们应该有信心开发一个完整的Next.js应用,可是开发完后我们又怎么让别人访问到我们的网站呢?这就涉及到构建与部署了。
构建和部署是 Web 应用开发的最后一步,也是最重要的一步。Next.js 提供了强大的构建系统,可以生成优化的生产版本。在这一节课,我们将学习如何构建 Next.js 应用,如何部署到 Vercel 和其他平台,如何配置环境变量,以及如何优化构建过程。

在部署之前,我们需要构建应用。Next.js 提供了 build 命令来生成生产版本:
|npm run build
这个命令会执行以下操作:
构建完成后,我们可以使用 start 命令来启动生产服务器:
|npm start
构建完成后,Next.js 会在 .next 目录中生成构建输出。让我们了解一下这个目录的结构:
|.next/ ├── static/ # 静态资源 ├── server/ # 服务器端代码 ├── cache/ # 构建缓存 └── BUILD_ID # 构建 ID
.next/static 包含静态资源,如 JavaScript、CSS、图片等。.next/server 包含服务器端代码,用于服务端渲染和 API 路由。
环境变量用于存储敏感信息和配置。Next.js 支持在 .env.local 文件中定义环境变量:
|# .env.local DATABASE_URL=postgresql://user:password@localhost:5432/mydb API_KEY=your-api-key NEXT_PUBLIC_APP_URL=https://example.com
注意,以 NEXT_PUBLIC_ 开头的环境变量会暴露给客户端,其他变量只在服务器端可用。
在代码中使用环境变量:
|// app/api/data/route.ts export async function GET() { const apiKey = process.env.API_KEY; const dbUrl = process.env.DATABASE_URL; // 使用环境变量 const data = await fetchData(apiKey, dbUrl); return Response.json(data); }
|// app/components/Config.tsx 'use client'; export default function Config() { const appUrl = process.env.NEXT_PUBLIC_APP_URL; return <div>应用 URL: {appUrl}</div>; }
Vercel 是 Next.js 的创建者,提供了无缝的部署体验。部署到 Vercel 非常简单:
首先,将代码推送到 Git 仓库(GitHub、GitLab 或 Bitbucket)。
然后,在 Vercel 中导入项目。Vercel 会自动检测 Next.js 项目并配置构建设置。
Vercel 会自动:
npm run build).next)我们也可以在 vercel.json 中自定义配置:
|{ "buildCommand": "npm run build", "outputDirectory": ".next", "framework": "nextjs", "regions": ["hkg1"], "env": { "DATABASE_URL": "@database-url" } }
Next.js 应用可以部署到任何支持 Node.js 的平台。以下是一些常见平台的部署方法:
我们可以使用 Docker 来容器化应用:
|# Dockerfile FROM node:18-alpine AS base # 安装依赖 FROM base AS deps WORKDIR /app COPY package*.json ./ RUN npm ci # 构建应用 FROM base AS builder WORKDIR /app COPY --from=deps /app/node_modules ./node_modules COPY . . RUN npm run build # 生产镜像 FROM base AS runner WORKDIR
注意,这个 Dockerfile 使用了 Next.js 的 standalone 输出模式,需要在 next.config.mjs 中启用:
|// next.config.mjs const nextConfig = { output: 'standalone', }; export default nextConfig;
如果应用完全是静态的,我们可以导出为静态文件:
|// next.config.mjs const nextConfig = { output: 'export', images: { unoptimized: true, }, }; export default nextConfig;
然后运行构建:
|npm run build
构建输出会在 out 目录中,可以部署到任何静态文件服务器。
针对 Next.js 应用的构建优化,我们可以通过以下多种方式配置来提升构建效率和产物质量,常见的优化点包括启用压缩、优化 CSS、删除生产环境下的 console 语句、针对常用依赖包做包体积裁剪,以及自定义 webpack 配置来兼容特定的依赖库。这些配置可以灵活组合,以满足不同项目的需求。常见的构建优化配置如下:
|// next.config.mjs const nextConfig = { // 压缩 compress: true, // 生产环境移除 console compiler: { removeConsole: process.env.NODE_ENV === 'production', }, // 实验性功能 experimental: { optimizeCss: true, optimizePackageImports: ['lucide-react'], }, // 自定义 webpack 配置 webpack: (config, { isServer
这个配置启用了压缩、移除了生产环境的 console、优化了 CSS 和包导入,并自定义了 webpack 配置。
应用部署上线后,健全的监控与日志体系对于保障稳定运行和及时发现问题至关重要。Vercel 平台为 Next.js 应用提供了开箱即用的监控与日志服务,包括实时请求日志、构建日志、性能分析等,方便开发者在 Dashboard 中可视化观察应用的运行情况。 此外,我们还可以灵活集成第三方监控和分析服务(比如 Sentry、Datadog、LogRocket 等)进行更细粒度的性能监控、错误收集和用户行为跟踪,从而实现全方位的可观测性与预警。
|// app/layout.tsx import { Analytics } from '@vercel/analytics/react'; import { SpeedInsights } from '@vercel/speed-insights/next'; export default function RootLayout({ children, }: { children: React.ReactNode; }) { return ( <html> <body> {children}
在这一部分,我们简单的了解了 Next.js 的构建和部署。我们学习了如何构建应用,如何配置环境变量,如何部署到 Vercel 和其他平台,如何优化构建过程。 部署是应用开发的最后一步,但也是最重要的一步。通过合理配置构建和部署流程,我们可以确保应用在生产环境中稳定运行。
Next.js 是一个强大的框架,它提供了构建现代 Web 应用所需的一切工具。通过掌握这些工具,我们可以创建既快速又功能丰富的应用。希望这个教程能够帮助你开始使用 Next.js 构建自己的项目。