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

Question

出于 SEO 目的，我需要将英语设置为默认语言 -> mynextapp.com/ 当用户进入网站时，he/she 可以选择英语或法语，如果选择英语，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，并通过设置 [=14= 选择退出自动处理语言环境前缀] 到 false.

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

如果您希望所有 Link 都以这种方式运行，并在 URL 上强制使用默认区域设置，则需要应用相同的逻辑。

假设您有一个 link 到 /about 页面，它将如下所示。

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

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

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

How to force default locale in the URL when clicking a link in Next.js