编辑 页面以使用中间件

Exchange insights, tools, and strategies for canada dataset.
Post Reply
asikurrahmanshuvo
Posts: 149
Joined: Mon Dec 23, 2024 4:06 am

编辑 页面以使用中间件

Post by asikurrahmanshuvo »

在我们的示例中,由于我们使用地理位置,我们希望索引页能够在请求时呈现数据,以便向访问者提供正确的内容。这意味着我们需要使用该 函数。复制以下代码,然后我们将解开它的工作原理。

为了从中间件函数中的 DOM 访问消息,我们在静态页面中为想要转换的消息添加一个 ID,以便根据访问者的国家代码向他们显示正确的消息。您可以根据需要随意更改国家代码和消息。

现在,让我们转到,你应该看到如下内容:

使用 Next.js 中间件将内容本​​地化为阿根廷我收到了来自阿根廷的访客会收到的回复(因为我在阿根廷),但如果你不是来自受支持的国家之一,你应该会收到类似这样的回复:

将内容本地化至不支持的国家/地区这只是一个原型,但您可以在大 柬埔寨whatsapp数据 型站点中实现这样的系统,并将我的小型模拟模式扩展为具有您能想到的尽可能多的语言的完整本地化数据库。

步骤 6.部署到 Netlify
您可能想知道,“地理位置数据到底从何而来?为什么以前没有中间件就无法访问这些数据?”您说得对,事后看来,这似乎是一个常识性的补充——但以前真正的障碍是托管服务提供商。实际上,知道您的用户在哪里的不是 Next.js,而是托管平台。Next.js 只是在托管服务提供商提供该信息时显示该信息。现在这一切之所以如此重要,是因为 Netlify 现在支持将这些信息传递到 Next.JS。换句话说,我们的整个工具堆栈正在协同工作,使开发人员的工作更轻松,这是我们所有人都可以支持的事情

netlify init让我们通过在终端中运行来初始化 Netlify 上的新站点,并选择创建和配置新站点。选择您的团队并选择一个站点名称。CLI 将要求您输入构建命令,但您可以使用默认命令next build,因此按 Enter 键,等待几秒钟,就完成了!您的站点已部署。请随时在此处查看我的原型运行情况。

结束语
虽然这个例子很短而且相对简单,但它展示了中间件的多功能性。只需拦截请求并快速更改它们,它就能让你向世界各地的访问者提供不同的内容,实现甚至精细的本地化选项,就像我为不同的西班牙语变体所做的那样。毫无疑问,我迫不及待地想看看这项有前途的技术如何继续改进和发展,以用于更多的用例。
Post Reply