Skip to content
Next.js logo

全栈 JavaScript 解决方案

使用 FlyEnv 构建 Next.js 本地开发环境

在一个工作区中,使用 Node.js 运行时、项目指定的包管理器、本地数据库、Redis、自定义域名和 HTTPS 构建、运行并测试 Next.js 应用。

Next.js 的实用本地技术栈

Next.js 可以从一个 Node.js 进程开始运行,但真实的全栈项目通常还需要协调一致的运行时、构建工具、数据服务和浏览器访问入口。

Node.js 运行时

使用项目支持的版本运行 Next.js 服务器、开发工具和构建脚本。

Node.js 特性

包管理器

使用仓库已经指定的包管理器和 lockfile:npm、pnpm、Yarn 或 Bun。

应用数据库

当 Server Actions、路由处理器或应用层需要持久化数据时,连接 PostgreSQL 或 MySQL。

数据库特性

可选 Redis

应用需要缓存、会话、队列、限流或后台任务时,再添加 Redis。

Redis 特性

本地访问入口

应用需要稳定的本地主机名、代理行为或多个服务时,使用 Nginx 或 Caddy。

Nginx 特性

浏览器流程的 HTTPS

在受信任的本地入口上测试 OAuth、安全 Cookie、Webhook、Service Worker 等浏览器功能。

本地 HTTPS 特性

FlyEnv 中的 Next.js 开发生命周期

从安装依赖到运行接近生产环境的构建,让项目运行时与包管理工作流始终保持一致。

1

安装依赖

使用选定的项目工具链解析 lockfile。

npm install
2

运行开发服务器

在本地运行 App Router、Server Components 和路由处理器。

npm run dev
3

构建

在部署前发现生产渲染和依赖问题。

npm run build
4

启动生产模式

通过本地域名和 HTTPS 提供构建后的应用。

npm start

在一个本地工作区中管理前端与后端

Next.js 项目可以在一个应用中提供 UI、路由处理器、Server Actions 和 API 调用,同时继续使用本地数据服务。

浏览器与本地入口

打开 https://next-app.test,测试 Cookie、OAuth、Webhook 和客户端集成流程。

UI 与路由处理器

由 Next.js 项目提供页面、Server Actions、API 端点和前端后端逻辑。

Next.js 应用

App Router · Server Components · Route Handlers · Server Actions

前端后端
PostgreSQL 或 MySQL

PostgreSQL 或 MySQL

存储服务端使用的用户、内容、订单和其他应用数据。

按需使用 Redis

按需使用 Redis

支持缓存、会话、队列、限流或其他高速共享状态。

浏览器 / HTTPSNext.js 应用PostgreSQL / Redis

项目运行时与包管理器

Node.js 是应用运行时,包管理器则属于项目工具链的一部分。让这两项选择清晰可见,不要依赖单一的全局安装。

FlyEnv 管理项目周边的运行时和本地服务,但不会替代 npm、pnpm、Yarn、Bun 或项目现有的脚本。

Node.js 版本

匹配 Next.js 版本、依赖和部署目标所要求的 Node.js 版本。

打开 Node.js 特性

包管理器

让 npm、pnpm、Yarn 或 Bun 与项目的 lockfile 和脚本保持一致。

Lockfile 属于项目的一部分
FlyEnv 启动组一键启动项目服务
使用启动组一键启动 Next.js 应用、数据库、Redis 及其他本地服务。

开始新的 Next.js 项目,或运行已有项目

根据项目当前状态选择合适的工作流,并在同一个工作区中管理运行时和配套服务。

创建新的 Next.js 项目

  1. 1打开 Node.js → 新建项目,选择 Next.js 模板。
  2. 2选择项目使用的 Node.js 版本和包管理器。
  3. 3安装依赖,并将项目 lockfile 与源代码一起保存。
  4. 4按需添加本地域名、HTTPS 和数据库服务。
  5. 5为应用及其配套服务创建启动组。

运行已有的 Next.js 项目

  1. 1打开仓库,确认项目对 Node.js 和包管理器的要求。
  2. 2选择匹配的 Node.js 版本,并根据 lockfile 安装依赖。
  3. 3启动 PostgreSQL、MySQL、Redis 或其他已配置的服务。
  4. 4为浏览器访问流程配置本地代理、主机名和 HTTPS。
  5. 5开发时运行 next dev,接近生产环境检查时运行 next build 和 next start。

为什么使用 FlyEnv 进行 Next.js 开发

为需要在浏览器 UI、服务端代码、构建流程和数据服务之间切换的项目提供更可预测的本地工作流。

  • 为项目匹配 Node.js

    让不同 Next.js 项目使用依赖和部署目标支持的运行时版本。

    项目 A → Node.js 20 · 项目 B → Node.js 22

  • 一起运行应用和服务

    需要完整技术栈时,将 Next.js 应用、数据库、Redis 和本地代理作为一个项目组启动。

    Next.js + PostgreSQL + Redis → 启动组

  • 测试真实的本地入口

    使用易读的本地主机名和 HTTPS,测试 localhost 无法复现的浏览器行为。

  • 隔离全栈项目

    为每个项目分别保留运行时、本地 URL、数据库、Redis 和配套服务。

Next.js 常见问题

关于使用 FlyEnv 开发本地 Next.js 项目的常见问题。

不同的 Next.js 项目可以使用不同的 Node.js 版本吗?

可以。FlyEnv 允许每个项目使用自身所需的 Node.js 版本,适合应用或依赖处于不同版本周期的情况。

FlyEnv 会替代 Next.js 项目的包管理器吗?

不会。继续使用仓库选择的包管理器和 lockfile,FlyEnv 负责提供项目运行时以及周边的本地服务。

每个 Next.js 项目都需要数据库吗?

不需要。纯前端项目可能只需要 Node.js;当应用使用服务端数据、路由处理器或持久化内容时,再添加 PostgreSQL 或 MySQL。

什么时候应该添加 Redis?

当应用使用缓存、会话、队列、限流或其他高速共享状态模式时添加 Redis。Redis 是可选服务,并不是 Next.js 的必需组件。

可以在本地 Next.js 域名上测试 OAuth 和 Webhook 吗?

可以。配置带受信任 HTTPS 的本地域名后,浏览器 Cookie、OAuth 回调、Webhook 和其他安全来源功能会更接近生产环境。

FlyEnv 可以运行 next build 和 next start 吗?

可以。FlyEnv 提供 Node.js 运行时和本地服务,项目自己的脚本仍然负责运行 next build 和 next start,完成接近生产环境的本地检查。

准备好在本地构建 Next.js 了吗?

在一个工作区中运行 Node.js、构建流程、数据服务、本地域名和 HTTPS。

下载 FlyEnv
使用 FlyEnv 时有疑问?