部署和构建
在学习完前面所有的课程后，我们应该有信心开发一个完整的Next.js应用，可是开发完后我们又怎么让别人访问到我们的网站呢？这就涉及到构建与部署了。
构建和部署是 Web 应用开发的最后一步，也是最重要的一步。Next.js 提供了强大的构建系统，可以生成优化的生产版本。在这一节课，我们将学习如何构建 Next.js 应用，如何部署到 Vercel 和其他平台，如何配置环境变量，以及如何优化构建过程。
构建 Next.js 应用
在部署之前，我们需要构建应用。Next.js 提供了 build 命令来生成生产版本：
shell
npm run build这个命令会执行以下操作：
- 编译 TypeScript 和 JavaScript
- 优化代码和资源
- 生成静态页面
- 创建优化的生产包
构建完成后，我们可以使用 start 命令来启动生产服务器：
shell
npm start理解构建输出
构建完成后，Next.js 会在 .next 目录中生成构建输出。让我们了解一下这个目录的结构：
shell
.next/
├── static/ # 静态资源
├── server/ # 服务器端代码
├── cache/ # 构建缓存
└── BUILD_ID # 构建 ID.next/static 包含静态资源，如 JavaScript、CSS、图片等。.next/server 包含服务器端代码，用于服务端渲染和 API 路由。
环境变量
环境变量用于存储敏感信息和配置。Next.js 支持在 .env.local 文件中定义环境变量：
bash
# .env.local
DATABASE_URL=postgresql://user:password@localhost:5432/mydb
API_KEY=your-api-key
NEXT_PUBLIC_APP_URL=https://example.com注意，以 NEXT_PUBLIC_ 开头的环境变量会暴露给客户端，其他变量只在服务器端可用。
在代码中使用环境变量：
tsx
// 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);
}tsx
// 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 中自定义配置：
json
{
"buildCommand": "npm run build",
"outputDirectory": ".next",
"framework": "nextjs",
"regions": ["hkg1"],
"env": {
"DATABASE_URL": "@database-url"
}
}部署到其他平台
Next.js 应用可以部署到任何支持 Node.js 的平台。以下是一些常见平台的部署方法：
Docker 部署
我们可以使用 Docker 来容器化应用：
dockerfile
# 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 /app
ENV NODE_ENV production
COPY --from=builder /app/public ./public
COPY --from=builder /app/.next/standalone ./
COPY --from=builder /app/.next/static ./.next/static
EXPOSE 3000
CMD ["node", "server.js"]注意，这个 Dockerfile 使用了 Next.js 的 standalone 输出模式，需要在 next.config.mjs 中启用：
js
// next.config.mjs
const nextConfig = {
output: 'standalone',
};
export default nextConfig;静态导出
如果应用完全是静态的，我们可以导出为静态文件：
js
// next.config.mjs
const nextConfig = {
output: 'export',
images: {
unoptimized: true,
},
};
export default nextConfig;然后运行构建：
shell
npm run build构建输出会在 out 目录中，可以部署到任何静态文件服务器。
构建优化
针对 Next.js 应用的构建优化，我们可以通过以下多种方式配置来提升构建效率和产物质量，常见的优化点包括启用压缩、优化 CSS、删除生产环境下的 console 语句、针对常用依赖包做包体积裁剪，以及自定义 webpack 配置来兼容特定的依赖库。这些配置可以灵活组合，以满足不同项目的需求。常见的构建优化配置如下：
js
// 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 }) => {
if (!isServer) {
config.resolve.fallback = {
...config.resolve.fallback,
fs: false,
};
}
return config;
},
};
export default nextConfig;这个配置启用了压缩、移除了生产环境的 console、优化了 CSS 和包导入，并自定义了 webpack 配置。
监控和日志
应用部署上线后，健全的监控与日志体系对于保障稳定运行和及时发现问题至关重要。Vercel 平台为 Next.js 应用提供了开箱即用的监控与日志服务，包括实时请求日志、构建日志、性能分析等，方便开发者在 Dashboard 中可视化观察应用的运行情况。 此外，我们还可以灵活集成第三方监控和分析服务（比如 Sentry、Datadog、LogRocket 等）进行更细粒度的性能监控、错误收集和用户行为跟踪，从而实现全方位的可观测性与预警。
tsx
// 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}
<Analytics />
<SpeedInsights />
</body>
</html>
);
}小节回顾
在这一部分，我们简单的了解了 Next.js 的构建和部署。我们学习了如何构建应用，如何配置环境变量，如何部署到 Vercel 和其他平台，如何优化构建过程。 部署是应用开发的最后一步，但也是最重要的一步。通过合理配置构建和部署流程，我们可以确保应用在生产环境中稳定运行。
Next.js 是一个强大的框架，它提供了构建现代 Web 应用所需的一切工具。通过掌握这些工具，我们可以创建既快速又功能丰富的应用。希望这个教程能够帮助你开始使用 Next.js 构建自己的项目。