Next.js - 部署

在本章中，我们将学习如何将 Next.js 应用程序部署到各种平台。

创建生产构建

在部署 Next.js 应用程序之前，您需要创建生产构建。要创建生产构建，请运行以下命令：

npm run build

运行上述命令，将生成您的应用程序的优化生产版本。根据您的页面创建 HTML、CSS 和 JavaScript 文件。JavaScript 会被编译，并使用 Next.js Compiler 对浏览器 bundle 进行 minify，以实现最佳性能并支持所有现代浏览器。

部署到 GitHub Pages

GitHub Pages 是一个静态站点托管服务，允许您直接从 GitHub 仓库托管您的网站。要将 Next.js 应用程序部署到 GitHub Pages，请按照以下步骤操作：

• 创建一个以您的项目命名的 GitHub 仓库。例如，testing-app。
• 在您的项目中，向 /next.config.ts 文件添加 base path、output 和 image optimization method。

  // next.config.js
  const nextConfig: NextConfig = {
      basePath: "/testing-app", // 您的项目名称
      output: "export",
      images: {
          unoptimized: true 
      }, 
  };
  

• 现在，在您的项目根目录中创建一个 .github/workflows/deploy.yml 文件，并添加以下代码。这将自动化部署过程。

  # .github/workflows/deploy.yml
  name: Deploy Next.js to GitHub Pages
  
  on:
    push:
      branches: ["main"]
    workflow_dispatch:
  
  permissions:
    contents: read
    pages: write
    id-token: write
  
  concurrency:
    group: "pages"
    cancel-in-progress: true
  
  jobs:
    build:
      runs-on: ubuntu-latest
      steps:
        - name: Checkout
          uses: actions/checkout@v4
  
        - name: Setup Node
          uses: actions/setup-node@v4
          with:
            node-version: "18"
            cache: 'npm'
  
        - name: Install dependencies
          run: npm ci
  
        - name: Build with Next.js
          run: npm run build
  
        - name: Upload artifact
          uses: actions/upload-pages-artifact@v3
          with:
            path: ./out
  
    deploy:
      environment:
        name: github-pages
        url: ${{ steps.deployment.outputs.page_url }}
      runs-on: ubuntu-latest
      needs: build
      steps:
        - name: Deploy to GitHub Pages
          id: deployment
          uses: actions/deploy-pages@v4
  

• 在您的 package.json 中，确保包含以下 scripts：

  {
    "scripts": {
      "build": "next build",
      "export": "next export"
    }
  }
  

• 在您的 GitHub 仓库设置中，转到 Settings > Pages，在“Build and deployment”下，将源选择为“GitHub Actions”。确保为您的仓库启用了 GitHub Pages。
• 现在，将您的代码推送到 main 分支。GitHub Actions 将自动构建并将您的 Next.js 应用程序部署到 GitHub Pages。

  // 将更改添加到 git
  git add .
  
  // 提交更改
  git commit -m "Configure GitHub Pages deployment"
  
  // 推送更改
  git push origin main
  

部署成功后，您可以在仓库的部署部分看到访问已部署页面的链接。我们部署了上一章创建的 navigation and linking 页面。您可以在这里访问实时页面：farzzn.github.io/testing-app/

部署到 Vercel

Next.js 由 Vercel 开发和维护，Vercel 是一个专为部署静态网站设计的云平台。将 Next.js 部署到 Vercel 无需任何配置，并提供可扩展性、可用性和全球性能的增强功能。

如果您已经将 Next.js 部署到 Github pages，那么您可以通过连接您的 GitHub 创建 Vercel 账户，轻而易举地将它部署到 Vercel。您可以一键导入您的仓库并部署到 Vercel。如果您尚未部署到 GitHub，请按照以下步骤操作：

前提条件

• 创建 GitHub 账户
• 创建 Vercel 账户（使用您的 GitHub 账户注册）

步骤

• 首先，将您的 Next.js 项目推送到 GitHub。在项目目录中运行以下命令：

// 初始化 git
git init

// 将所有文件添加到 git
git add .

// 提交更改
git commit -m "Initial commit"

// 添加远程仓库
git remote add origin your-github-repo-url

// 推送到 GitHub
git push -u origin main        

部署完成后，Vercel 将为您提供一个生产 URL（yourproject-gamma-seven.vercel.app）、自动 HTTPS，以及每次 git push 的自动部署。我们已经将上面讨论的相同导航和链接页面部署到 Vercel。您可以在这里访问实时页面：https://testing-app-gamma-seven.Vercel.app/

Next.js 自托管

Next.js 支持自托管，这意味着您可以将 Next.js 应用托管在自己的服务器上。通过自托管，您可以控制运行应用的服务器、环境和资源。

• Node.js server: 您可以在自定义 Node.js 服务器上运行 Next.js 应用。这涉及在服务器上安装和配置 Node.js 环境，然后使用 next start 或类似命令运行应用。此选项支持动态渲染和 API routes，并提供对服务器设置的完全控制。
• Docker container: 您可以使用 Docker 将 Next.js 应用容器化。这意味着为 Next.js 应用创建 Docker image，可以部署到任何运行 Docker 的机器。它提供了 consistente 和可移植的环境，以及更容易的扩展和管理。
• Static export: Next.js 可以使用 next export 命令生成网站的静态版本。这会创建一个 HTML 文件集，可以由任何 web server 提供服务，而无需 Node.js 环境。这是自托管的最简单形式，适用于没有服务器端逻辑的静态网站。