HTML 重写和页面数据转换

[asikurrahmanshuvo]

Next.js 中的中间件允许您在 HTTP 请求完成之前运行代码 — 并且位于请求和响应的中间。您可以使用 JavaScript 或 TypeScript 在 Next.js 中创建中间件文件，出于本教程的目的，我们将使用 TypeScript 编写中间件。

在项目的根目录下，创建一个新文件并将其命名为middleware.ts。此文件将在您的应用运行时在每个请求上运行 - 包括页面、静态文件和资产。在 中middleware.ts添加以下代码。我们正在导入类型NextRequest，它代表传入的 HTTP 请求，导出一个名为 的异步函数middleware，并将请求作为nextRequest函数传递，该函数是一个NextRequest对象。

接下来，是 Netlify 施展魔法的时候了。让我们重写之前 牙买加whatsapp数据 创建的静态页面的 HTML。在文件顶部附近，将其MiddlewareRequest作为命名的 import from导入。
在中间件函数内部，让我们初始化一个新的 Netlify ，并将原始内容MiddlewareRequest传入。

通过添加Netlify Edge Functions中可用的所有好东西，这增强了原始请求对象。Netlify Edge Functions 非常类似于无服务器函数。您可以使用 JavaScript 或 TypeScript 编写它们，但 它们不是在底层 使用Node.js ，而是由Deno（基于 Web 标准构建的开源运行时）提供支持，并且它们在距离请求最近的服务器位置执行。这样可以在 Next.js 中的 The Edge 上完全个性化页面，而无需getServerSideProps()在页面路由中使用。它还可以与增量静态再生一起使用。

现在我们的NextRequest对象与 Netlify 的级别一致MiddlewareRequest，我们有能力在返回之前修改 HTTP 响应 - 因为我们实际上可以将请求发送到原点来获取它并使用它。

在语句中添加以下代码if，让我们来解析一下它的作用。

如果路径名以 开头static，我们通过 await 来获取 HTTP 链中的下一个响应middlewareRequest.next()（这是我们的静态页面），并将其分配给变量response。然后，使用 中的地理位置数据nextRequest，我们构建一条新的个性化消息来替换静态页面内容。

Netlify 的 Next.js 高级中间件包含一个 replaceText 函数，并且还支持使用 HTML Rewriter 流转换器进行更强大的转换。为了在中间件函数中访问来自 DOM 的消息，我们向包含我们要在静态页面上转换的消息的 DOM 节点添加一个 ID。