Next.js 项目如何部署？

Published onJuly 19, 2024

-Views

5Minutes Read

Next.js 项目部署指南

Next.js 作为一个灵活的 React 框架，提供了多种部署选项，可以根据项目需求和基础设施选择最合适的部署方式。本文将详细介绍 Next.js 项目的各种部署方案。

部署到 Vercel（推荐）

Vercel 是 Next.js 的创建者开发的云平台，为 Next.js 应用提供了最佳的部署体验：

创建 Vercel 账户
导入你的 Git 仓库
Vercel 会自动检测 Next.js 项目并使用最优配置
应用部署完成后，会自动分配一个域名

Vercel 平台优势：

零配置部署
自动 HTTPS
全球 CDN
自动预览部署（每个 PR 创建独立环境）
性能分析和监控
无需额外配置即可支持所有 Next.js 功能

部署到自托管服务器

Node.js 服务器部署

适用于需要 Next.js 所有功能（如 API 路由、服务端渲染等）的项目：

构建生产版本：

启动 Node.js 服务器：

默认情况下，Next.js 服务器会在端口 3000 上运行。如果需要指定其他端口号，有以下几种方法：

方法一：使用环境变量

方法二：修改 package.json

方法三：使用 cross-env 包（跨平台解决方案）

首先安装 cross-env：

然后在 package.json 中配置：

这样可以更灵活地在不同环境中指定不同的端口号。

使用 PM2 等进程管理工具保持服务运行：

PM2 配置文件示例 (

然后使用配置文件启动:

PM2 常用命令:

Docker 容器部署

创建

：

在

中启用独立输出：

运行 Docker 容器时指定端口：

静态导出部署

对于不需要服务器端功能的项目，可以使用静态导出，部署到任何静态网站托管服务：

静态导出配置详解

在 Next.js 13.3.0 及以上版本中，静态导出的配置方式已更新。不再需要在

中添加

命令，而是通过

配置：

执行构建命令即可生成静态文件：

构建完成后，静态文件将生成在

目录中（除非你自定义了

）。

静态导出的功能支持

静态导出支持的功能：

服务器组件（在构建时运行）
客户端组件
动态路由（使用
）
使用
的预取
JavaScript 预加载
动态导入
各种样式选项（CSS Modules、styled-jsx 等）
客户端数据获取
图像优化（使用自定义加载器）
路由处理程序（仅支持 GET 方法）

不支持的功能：

没有
的动态路由
依赖请求的路由处理程序
Cookies
重写（Rewrites）
重定向（Redirects）
头信息（Headers）
中间件（Middleware）
增量静态再生（ISR）
草稿模式（Draft Mode）
服务器操作（Server Actions）
拦截路由（Intercepting Routes）

Nginx 配置示例

将静态导出的 Next.js 应用部署到 Nginx 服务器上，需要正确配置

。以下是一个基本配置示例，包括端口设置：

常见问题与解决方案

1. 图片优化问题

使用静态导出时，默认的图像优化不可用。解决方案：

使用
的
属性
配置自定义图像加载器（如 Cloudinary、Imgix 等）

2. 环境变量处理

静态导出时，环境变量在构建时被注入，无法在运行时更改。解决方案：

使用
前缀的环境变量
实现运行时配置（如
）

3. API 路由替代方案

静态导出不支持 API 路由，替代方案：

使用无服务器函数（Serverless Functions）
使用独立的 API 服务
使用客户端直接调用外部 API

4. 自定义端口问题

在不同环境中可能需要使用不同的端口：

开发环境：使用
指定开发服务器端口
生产环境：使用上文提到的方法指定生产服务器端口
静态导出：静态文件本身不包含端口信息，由托管服务器（如 Nginx）决定

5. 多端口部署

有时需要在同一服务器上部署多个 Next.js 应用：

Nginx 反向代理配置示例：

参考资料

Tags:

#Nextjs

#部署

#静态导出

WebJAM