部署

经过前面的学习，我们已经构建了一个完整的网站。现在让我们学习如何将应用部署到生产环境。在这最后的部分，我们将学习如何构建生产版本、部署到 Vercel、配置环境变量和设置自定义域名。

构建生产版本

在部署之前，我们需要先构建生产版本。这会让 Next.js 优化代码、生成静态页面等：

|
npm run build

这个命令会：

• 编译 TypeScript/JavaScript 代码
• 优化和压缩代码
• 生成静态页面（如果可能）
• 创建优化的生产构建

构建完成后，你可以使用以下命令在本地测试生产版本：

|
npm start

这会在生产模式下启动服务器，让你可以在部署前测试应用。如果你没有跑通这一步的话，尝试解决你遇到的问题，然后直到你跑通为止。

部署到 Vercel

Vercel 是 Next.js 的创建者开发的部署平台，对 Next.js 应用有最好的支持。部署到 Vercel 非常简单：

方法一：通过 Vercel CLI

首先安装 Vercel CLI：

|
npm i -g vercel

然后登录并部署：

|
vercel login
vercel

按照提示操作，Vercel 会自动检测 Next.js 项目并配置部署。

方法二：通过 GitHub 集成

部署后，Vercel 会提供一个 URL（如 your-project.vercel.app），你的应用就可以访问了。

设置自定义域名

你可以在 Vercel 中设置自定义域名：

1. 在项目设置中找到 "Domains"
2. 输入你的域名（如 freeeducation.com）
3. 按照提示配置 DNS 记录：
   • 添加 CNAME 记录指向 cname.vercel-dns.com
   • 或添加 A 记录指向 Vercel 提供的 IP 地址

配置完成后，Vercel 会自动为你的域名配置 SSL 证书。

配置 next.config.mjs

在生产环境中，你可能需要调整 Next.js 配置：

|
// next.config.mjs
/** @type {import('next').NextConfig} */
const nextConfig = {
  // 输出配置
  output: 'standalone', // 用于 Docker 部署， 如果你不使用 Docker 部署，可以不配置
  
  // 图片配置
  images: {
    domains: ['example.com'],
    formats: ['image/avif', 'image/webp'],
  },
  
  // 重定向
  async redirects() {
    return [
      {
        source: 

处理错误和日志

在生产环境中，错误处理很重要。确保你有一个错误监控系统：

|
// app/error.tsx
'use client'
 
import { useEffect } from 'react'
 
export default function Error({
  error,
  reset,
}: {
  error: Error & { digest?: string }
  reset: () => void
}) {
  useEffect(() => {
    // 将错误发送到错误监控服务

在部署前，确保你已经做了以下事情：

1. ✅ 所有环境变量已配置
2. ✅ 构建成功，没有错误
3. ✅ 生产构建在本地测试通过
4. ✅ 所有 API 路由正常工作
5. ✅ 图片和静态资源正确加载
6. ✅ SEO 元数据已配置
7. ✅ 错误处理已实现
8. ✅ 性能优化已应用
9. ✅ 自定义域名已配置（如果需要）

让我们总结一下完整的部署流程：

|
git add .
git commit -m "准备部署"
git push origin main

除了 Vercel，你还可以尝试部署到其他平台，例如：

• Netlify: 类似 Vercel，对 Next.js 有良好支持
• AWS: 使用 AWS Amplify 或自建服务器
• Docker: 使用 Docker 容器部署到任何平台
• 自建服务器: 使用 Node.js 服务器运行 Next.js

写在最后

通过这整个课程的学习，相信现在你已经具备了使用 Next.js 和 Tailwind CSS 构建完整 Web 应用的能力，但是这还只是一个开始，不要满足于此，继续实践，努力探索更多高级特性，构建更强大的应用！