从头部署Next.js到EdgeOne Makers并支持服务端渲染、中间件等功能

本文将介绍Next.js应用如何在不使用静态站点导出（SSG）的情况下部署到EdgeOne Makers，并支持服务端渲染、中间件等功能。

序言

众所周知，2025年末，Next.js 被爆出存在高危严重漏洞，因 React Server Components 反序列化远程代码执行漏洞（CVE-2025-55182），部署了基于 React 的 Next.js 服务器也因此受到攻击风险。

不巧的是，笔者的主站使用的也正是 Next.js 框架，当初笔者未能第一时间了解到这个漏洞，攻击者使用该漏洞成功入侵了服务器，并在服务器上执行了恶意代码，经调查后发现植入了持久性后门、挖矿木马等恶意软件，服务器网站文件被篡改。这次攻击直接导致了我们的百科站点直接关停，其他服务直接中断。

这在当时让笔者深刻意识到，我们不仅在容灾能力不足，应急预案也不完善，让大量服务集中在一台服务器上，一旦服务器故障，整个系统就会崩溃。因此，我们决定着手开始将业务分散部署，而我们基于 Next.js 框架的主站，就选择部署在了 EdgeOne Makers 上。

接下来，笔者将把 Next.js 项目创建和部署在 EdgeOne Makers 的过程分享出来。

服务器失陷

为什么选择 EdgeOne Makers

笔者在一开始是打算选择 Cloudflare Workers 作为部署平台，但不知为何，可能是没有 OpenNext ， Wrangler 一直识别不出现有 Next.js 项目，最后放弃选择 Cloudflare Workers ，寻找其他部署平台。

之后，笔者发现 EdgeOne Makers 是一个非常符合需求的平台，它不仅支持 Next.js 的部署，也全面支持 Next.js 的多种渲染模式。这意味着我们部署在 EdgeOne Makers 上的 Next.js 应用不仅可以不用作为静态网站部署，还可以支持服务端渲染、中间件等功能。

创建 Next.js 项目

要创建 Next.js 项目，需要使用 Node.js ， Node.js 可前往 [https://nodejs.org/zh-cn/download] 下载，安装过程在此不多赘述。

安装完成后打开命令行，执行以下命令创建 Next.js 项目：

1
2
npx create-next-app@latest my-app --yes
// my-app 是项目名称，可以根据实际情况修改。

接下来等待项目创建完成

完成创建后，执行以下命令启动项目：

1
2
3
4
// 若命令行未在项目目录下，需要先切换到项目目录（my-app改为您自己的项目名称）
cd my-app

npm run dev

运行命令后访问 localhost:3000 即可查看项目运行效果。

部署到 EdgeOne Makers

当项目编写完成，准备就绪后，即可将项目部署到 EdgeOne Makers 上。

我们需要先在腾讯云 EdgeOne 控制台上创建一个API Token，以方便后续部署。

创建完成后在命令行执行以下命令初始化 Edgeone Makers 项目：

1
2
3
4
5
// 若命令行未在项目目录下，需要先切换到项目目录（my-app改为您自己的项目名称）
cd my-app

npx edgeone makers init -t your-token
// your-token 改为您在腾讯云 EdgeOne 控制台上创建的API Token

图中第一个 Edge Function 必须按 y 确认，否则无法正常部署。

初始化完成后，即可将项目部署到 EdgeOne Makers 上。

如果您未在控制台创建同名项目，接下来的部署命令执行后会自动创建一个新项目，而默认创建的项目是全球可用区（含中国大陆）的。

若您的域名未备案，需要先在腾讯云 EdgeOne 控制台上创建一个全球可用区（不含中国大陆）的项目，在控制台点击“创建项目”-“直接上传”，文件拖动区域内点击“示例模板”后，随意选择一个模板进行创建即可。

注意：确认您的项目 next.config.ts 文件/ next.config.mjs 文件没有添加output: 'export'进行静态导出，否则部署后中间件、服务器渲染等功能将不会生效。

接下来执行以下命令，将项目部署到 EdgeOne Makers 上：

1
2
npx edgeone makers deploy -n your-project-name -t your-token
// your-project-name 是项目名称。

部署完成后，访问命令行返回的URL，即可查看项目运行效果。

之后，自定义域名等设置操作，可在腾讯云 EdgeOne 控制台上进行。

中间件测试

笔者编写了一个中间件，用于拦截IE浏览器的请求，返回一个提示信息，提示用户升级浏览器。

通过该方法部署在 EdgeOne 后，使用IE浏览器访问会返回提示信息，而其他浏览器会正常访问。

证明了 EdgeOne Makers 确实支持 Next.js 中间件的功能。

若要进行验证，可自行访问笔者 主站 ，并将UA更改为IE浏览器的UA进行验证。

以下是笔者使用的中间件代码：

proxy.tsx
1
2
3
4
5
6
7
8
9
10
11
12
import { NextRequest, NextResponse } from "next/server";

export function proxy(request: NextRequest) {
  const userAgent = request.headers.get('user-agent') || '';
  const isIE = /MSIE|Trident/.test(userAgent);

  if (isIE && !request.nextUrl.pathname.startsWith('/blackboard/activity-ienotallow.html')) {
    return NextResponse.redirect(new URL('/blackboard/activity-ienotallow.html', request.url));
  }

  return NextResponse.next();
}

结束🎉

若要了解更多信息，可前往 EdgeOne Makers 官方文档。