单击 Next.js 中的链接时如何在 URL 中强制使用默认区域设置

Question

出于 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>

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

Answer 1

要强制默认语言将区域设置添加到 URL，您可以将其直接传递给

href

，并通过将

locale

设置为

false

来选择退出自动处理区域设置前缀。

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

如果您希望所有

Link

都以这种方式运行，并且还强制 URL 使用默认区域设置，则需要应用相同的逻辑。

假设您有指向

/about

页面的链接，它将如下所示。

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

---

如果使用

next/router

进行路由，也可以应用相同的逻辑。

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

Answer 2

为了将来的参考，我设法通过路由到另一种语言（2 个语言环境，其中一个是默认语言）来使代码正常工作，并在语言切换器中使用以下重定向逻辑，使默认前缀始终位于 URL 中：

i18n.changeLanguage(i18n.language === Locales.EN ? Locales.NL : Locales.EN);
router.push(
  `/${i18n.language}${router.pathname}`,
  `/${i18n.language}${router.asPath}`,
  {
    locale: false
  }
);

Answer 3

如何使用？

import { useLocale } from "next-intl";

...

  console.log(useLocale()); // en