使用 App 目录和 next-intl 翻译 Next.js 13 中的 URL

Question

我目前正在开发多语言 Next.js 13 应用程序，并且正在使用 next-intl 包进行国际化。我一直在尝试为我的路线设置翻译后的网址，但遇到了一些问题。

这是我想要实现的目标的示例。如果源语言是丹麦语，路线可能是：mypage/om。
对于英语，它将是：mypage/en/about。

我的项目的结构是利用应用程序目录（/app/[lang]/page.tsx）。

我已按照 next-intl 文档设置国际化路由，但我很难让 URL 翻译与此设置一起正常工作。

我需要页面能够利用“generateStaticParams”，这样我们就可以使用所有不同的语言构建静态页面，并允许每个 url 是特定于语言的，但仍然只需为主要语言创建 1 个单页面。我希望这是有道理的。

当我导航到 mypage/om 时，应用程序正确解析为丹麦语版本，我还可以在 mypage/en/om 上看到英语版本。但是，我希望能够导航到 mypage/en/about，而不必创建具有不同名称的多个页面。

是否有人有在 Next.js 13 中使用 next-intl 设置翻译 URL 的经验，特别是应用程序目录结构？任何帮助将不胜感激。预先感谢！

Answer 1

你应该使用 next.js rewrites。

资源：

next-itnl 本地化路径名 - https://next-intl-docs.vercel.app/docs/routing/middleware#localizing-pathnames
next.js 重写 https://nextjs.org/docs/pages/api-reference/next-config-js/rewrites
next.js 13 条命名路由示例 -https://github.com/amannn/next-intl/tree/feat/next-13-rsc/examples/example-next-13-named-routes

你的例子：

（在：next.config.js）：

 rewrites() {
    return [
      {
        source: '/da/om',
        destination: '/da/about',
      },
    ]
  },

文件结构：/app/[lang]/about/page.tsx

您想要将 url 映射到目录：

Answer 2

这也是我们正在等待的/有同样的问题，解决方案是烹饪...