时间戳

首页 > 解决方案 > Next.js 10 + i18n +（不同的）页面名称

reactjs - Next.js 10 + i18n +（不同的）页面名称

问题描述

我很高兴看到 i18n 使用 Next.js 10 进入 Next.js 核心。

但是，我想知道我们是否以及如何使用 i18n 来翻译页面名称（url？）。

例如，假设我在mypage.de/kontakt（默认德语）下有一个联系页面。

配置 Next.js 10 后，Next.js 会自动创建路由mypage.de/en/kontakt，目前还不错，但我们如何翻译页面名称呢？而不是/kontakt，我想拥有/contact。

Next.js 10 开箱即用是否可行？

它需要额外的库吗？2021 年正确的做法是什么？

非常感谢！

标签： reactjsnext.js

解决方案

假设您只有一个名为src/pages/contact.tsx. 有2个场景。

  1. 用户正在点击“foobar/contact” URL => 您可以使用i18n 重定向重定向到“foobar/de/contact”。然后客户端您可以使用浏览器 API 更改 URL（请参阅相关问题）。
  2. 用户正在点击“foobar/de/kontact”=>，因为您的页面名为“contact”而不是“kontact”，这是一个问题，因为该页面不存在。你会按原样打404。在这里，您需要按照@enoch 对您的问题的评论所述进行重写。您需要将“kontact”、“contactez-nous”、“contactar”...改写为“contact”路线。

希望 Next.js 重写功能非常强大，并允许在实际路由路径和用户看到的 URL 之间进行一些轻微的解耦。并且你也可以直接在 JS 中修改 URL。

第三种方法是在服务器端使用 URL 重写，但在撰写本文时（Next 11），它只能在主机级别进行处理，因此这取决于您上传应用程序的位置。

推荐阅读