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

IT技术 reactjs internationalization next.js next-router
2021-05-27 18:03:47

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

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 });