在开发模式下本地启动 应用

[asikurrahmanshuvo]

因为本示例需要使用开源的 Next.js 高级中间件，而该中间件目前仅有 Netlify 实现，所以我们将使用Netlify CLI进行开发。

网站将启动，您将在浏览器中看到以下内容：

在 Netlify CLI 上运行的 Next.js 站点的屏幕截图

4.添加 Next.js 高级中间件
要开始转换内容，请在项目根目录创建一个名为 的新文件middleware.ts。

在里面添加以下代码：

停止并重新启动开发服务器，并且middleware is happening!每当页面加载时都会记录在终端中。

这意味着我们的中间件正在运行！

5. 转换 Next.js 页面 HTML 和数据
为了避免 Next.js 中的 React hydration 错误，我们不 牙买加whatsapp数据 需要转换渲染的 HTML，还需要转换 Next.js 页面 props。

这需要修改 Next js 中间件中的页面响应，目前只能在 Netlify 上实现。

使用 Next.js 中间件时，可以获得有关当前用户地理位置数据的详细信息。让我们抓住它来个性化页面。

接下来，使用位置自定义标题，让我们也更新请求详细信息。

数据准备好后，我们现在可以使用提供的 API 来转换 HTML 和 props 数据：

注意：如果您想查看 hydration 问题，请省略调用setPageProp，这将导致渲染的 HTML 和页面 props 不同步，从而导致 React hydration 错误。