[英]How to force Next.js to always redirect to a preferred user language?
Currently, Next.js makes a redirect to the user's language only from the root, so "/" becomes "/fr-FR".目前,Next.js 仅从根目录重定向到用户的语言,因此“/”变为“/fr-FR”。 But if a user accesses for example "/profile" route, it won't redirect him to the "/fr-FR/profile".但是如果用户访问例如“/profile”路由,它不会将他重定向到“/fr-FR/profile”。
Is there a way to force Next to do these kinds of redirects?有没有办法强制 Next 进行这些类型的重定向?
Check out this Page from the official NextJS Documentation:从官方 NextJS 文档中查看此页面:
Prefixing the Default Locale 为默认语言环境添加前缀
It solves your problem by redirecting domain.com/example to domain.com/en/example它通过将 domain.com/example 重定向到 domain.com/en/example 来解决您的问题
You can do it with middleware and NEXT_LOCALE cookie, when you change language you should set this cookie您可以使用中间件和NEXT_LOCALE cookie 来完成,当您更改语言时,您应该设置此 cookie
document.cookie = `NEXT_LOCALE=${langugage};path=/`;
middleware.js中间件.js
import { NextResponse } from "next/server";
export function middleware(request) {
const localeCookie = request.cookies.get("NEXT_LOCALE");
if (localeCookie !== undefined && request.nextUrl.locale !== localeCookie) {
return NextResponse.redirect(new URL(`/${localeCookie}${request.nextUrl.pathname}`, request.url));
}
}
export const config = {
matcher: ["/", "/about"], // paths on which middleware will work
};
https://nextjs.org/docs/advanced-features/i18n-routing#leveraging-the-next_locale-cookie https://nextjs.org/docs/advanced-features/i18n-routing#leveraging-the-next_locale-cookie
https://nextjs.org/docs/advanced-features/i18n-routing#prefixing-the-default-locale https://nextjs.org/docs/advanced-features/i18n-routing#prefixing-the-default-locale
https://nextjs.org/docs/advanced-features/middleware https://nextjs.org/docs/advanced-features/middleware
https://nextjs.org/docs/messages/middleware-upgrade-guide https://nextjs.org/docs/messages/middleware-upgrade-guide
https://nextjs.org/docs/api-reference/next/server https://nextjs.org/docs/api-reference/next/server
Sub-path Routing
Sub-path Routing puts the locale in the url path.
With the above configuration en-US, fr, and nl-NL will be available to be routed to, and en-US is the default locale. If you have a pages/blog.js the following urls would be available:
//next.config.js
module.exports = {
i18n: {
locales: ['en-US', 'fr', 'nl-NL'],
defaultLocale: 'en-US',
},
}
/blog
/fr/blog
/nl-nl/blog
The default locale does not have a prefix.
from Nextjs docs
By default, Next.js automatically detects the user's preferred locale based on the Accept-Language
header sent in the page request.默认情况下,Next.js 根据页面请求中发送的Accept-Language
header 自动检测用户的首选语言环境。
To override the locale from this header you can use the NEXT_LOCALE
cookie .要从此 header 覆盖区域设置,您可以使用NEXT_LOCALE
cookie 。
This cookie can be set using a language switcher and then when a user comes back to the site it will leverage the locale specified in the cookie when redirecting from
/
to the correct locale location.可以使用语言切换器设置此 cookie,然后当用户返回站点时,它将利用 cookie 中指定的语言环境从/
重定向到正确的语言环境位置。
In your case, even if a user has the locale en
in their Accept-Language
header but a NEXT_LOCALE=fr-FR
cookie is set, then when visiting /profile
the user will be redirected to /fr-FR/profile
until the cookie is removed or expired.在您的情况下,即使用户在其Accept-Language
en
中使用语言环境但设置了NEXT_LOCALE=fr-FR
cookie,那么在访问/profile
时,用户将被重定向到/fr-FR/profile
直到 cookie删除或过期。
Check Storing selected language option in cookie/localSession for an example on how to store the NEXT_LOCALE
cookie.检查在 cookie/localSession 中存储选定的语言选项以获取有关如何存储NEXT_LOCALE
cookie 的示例。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.