单击 Next.js 中的链接时如何在 URL 中强制使用默认语言环境

Posted 2023-02-22

【中文标题】单击 Next.js 中的链接时如何在 URL 中强制使用默认语言环境

【英文标题】：How to force default locale in the URL when clicking a link in Next.js

【发布时间】：2021-06-11 09:56:05

【问题描述】：

出于 SEO 的目的，我需要将英语设置为默认语言 -> mynextapp.com/ 当用户进入网站时，他/她可以选择英语或法语，如果选择英语如果选择法语，则 url 将更改为 mynextapp.com/en -> mynextapp.com/fr

目前我正在使用 Next - i18n 中的内置选项：

i18n: 
    locales: ['en', 'fr'],
    defaultLocale: 'en',
,

但这让我只能将英语作为默认路径 = mynextapp.com/

语言切换器：

    <Link
        href="/"
        locale=router.locale === 'en' ? 'fr' : 'en'
    >
        <a>Switch</a>
    </Link>

有没有办法在不同的网址下处理相同的语言？这样当您在语言切换器中点击“en”时，url 路径应该是 myapp.com/en。

【问题讨论】：

我不确定我是否理解问题所在？您的默认语言（在这种情况下为英语）将在 / 和 /en 路由下可用。

@juliomalves 是的，当您手动将其添加到 url 时它可用，但是当您单击链接时，我想在语言之间切换（en/fr）我得到新的 url 路径仅用于法语 myapp.com/fr，但是当我点击英语时，网址只是 myapp.com/

啊，所以您希望在单击该链接时强制英语（默认）区域设置在 URL 中包含 /en。

没错。当您输入网站时，网址应该是 myapp.com/，默认情况下应该是英文（现在这样）。但是当你在语言切换器中点击“en”时，url路径应该是myapp.com/en（还是英文）

【参考方案1】：

要强制默认语言将区域设置添加到 URL，您可以将其直接传递给 href，并通过将 locale 设置为 false 来选择不自动处理区域设置前缀。

<Link href=`/$router.locale === 'en' ? 'fr' : 'en'` locale=false>
    <a>Switch</a>
</Link>

如果您希望所有 Links 都以这种方式运行，并且还强制 URL 使用默认语言环境，则需要应用相同的逻辑。

假设您有一个指向/about 页面的链接，它将如下所示。

<Link href=`/$router.locale/about` locale=false>
    <a>About Page</a>
</Link>

---

如果使用next/router做路由，同样的逻辑也可以应用。

router.push(`/$router.locale/about`, undefined,  locale: false );

【讨论】：

谢谢你的帖子，这可能是正确的，虽然当我点击英文标志时，是的，它确实设置了 myapp.com/en 的 url，但是当我点击其他链接时 - 假设关于我们的页面，url 不应该保留在 /en 中。当我在 /fr 路径上时，即使我点击其他页面链接，路径也保持不变。

您需要将此应用于您拥有的所有Link，因此它们都遵循相同的逻辑。您可以围绕 Link 创建一个包装器以实现可重用性。

但这只会在每个链接上不断切换语言，还是我错过了什么？

我现在明白了！完全有道理。谢谢！

这可能需要您进行一些澄清，所以我建议您在 *** 上为它创建一个新问题，并详细说明您遇到的问题。