14 / 14

部署和构建

在学习完前面所有的课程后，我们应该有信心开发一个完整的Next.js应用，可是开发完后我们又怎么让别人访问到我们的网站呢？这就涉及到构建与部署了。

构建和部署是 Web 应用开发的最后一步，也是最重要的一步。Next.js 提供了强大的构建系统，可以生成优化的生产版本。在这一节课，我们将学习如何构建 Next.js 应用，如何部署到 Vercel 和其他平台，如何配置环境变量，以及如何优化构建过程。

构建和部署

构建 Next.js 应用

在部署之前，我们需要构建应用。Next.js 提供了 build 命令来生成生产版本：


npm run build

这个命令会执行以下操作：

编译 TypeScript 和 JavaScript
优化代码和资源
生成静态页面
创建优化的生产包

构建完成后，我们可以使用 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

Vercel 是 Next.js 的创建者，提供了无缝的部署体验。部署到 Vercel 非常简单：

首先，将代码推送到 Git 仓库（GitHub、GitLab 或 Bitbucket）。

然后，在 Vercel 中导入项目。Vercel 会自动检测 Next.js 项目并配置构建设置。

Vercel 会自动：

检测框架（Next.js）
设置构建命令（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 部署

我们可以使用 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 构建自己的项目。

部署和构建 | 自在学