我最近开始使用Next.js,我正忙碌创建我的第一个网站,当然我希望有多语言。
我已经按照官方文档=> https://nextjs.org/docs/app/building-your-application/routing/internationalization
我创建的中间件是这样的:
import { NextResponse } from 'next/server'
import type { NextRequest } from 'next/server'
import { match } from '@formatjs/intl-localematcher'
import Negotiator from 'negotiator'
let headers = { 'accept-language': 'en-US,en;q=0.5' }
let languages = new Negotiator({ headers }).languages()
let locales = ['en', 'nl', 'fr']
let defaultLocale = 'nl'
// Get the preferred locale, similar to above or using a library
function getLocale(request: any): string {
return match(languages, locales, defaultLocale) // -> 'en-US'
}
export default function middleware(request: NextRequest) {
// Check if there is any supported locale in the pathname
console.log("Middleware is executed");
const pathname = request.nextUrl.pathname
const pathnameIsMissingLocale = locales.every(
(locale) => !pathname.startsWith(`/${locale}/`) && pathname !== `/${locale}`
)
// Redirect if there is no locale
if (pathnameIsMissingLocale) {
const locale = getLocale(request);
console.log(locale);
console.log(request);
// e.g. incoming request is /products
// The new URL is now /en-US/products
return NextResponse.redirect(
new URL(`/${locale}/${pathname}`, request.url)
)
}
return NextResponse.next();
}
export const config = {
matcher: [
// Skip all internal paths (_next)
'/((?!_next).*)',
// Optional: only run on root (/) URL
// '/'
],
}
字符串
结构看起来是这样的
x1c 0d1x的数据
我有一个语言转换器:
import Link from "next/link";
export default function LanguageSwitcher() {
return (
<ul>
<li><Link href="/" locale="en">EN</Link></li>
<li><Link href="/" locale="nl">NL</Link></li>
<li><Link href="/" locale="fr">FR</Link></li>
</ul>
)
}
型
我有几个问题:
1.语言切换器不工作,我不能切换语言这样做。
1.例如,如果我输入site.com/de/contact,那么它将转到site.com/nl/de/contact。对于未知的语言,他将添加默认语言:(
1.我不知道如何做到这一点,默认语言保持正常路由site.com/contact等site.com
有人能建议吗?
我已经检查了多个博客,但首先他们谈论页面路由(旧系统),+他们包括一些其他的软件包,我真的不需要简单。虽然我试过那些库,但无论如何都不能正确地工作。
1条答案
按热度按时间isr3a4wc1#
在中间件函数中,有一行代码检查路径名是否丢失,如下所示:
字符串
但是这样做你是在要求它检查路径名是否包含所有的locale,你应该寻找.some(),因为如果它匹配其中一个locale,就足以知道它是正确的。
因此,将其更改为:
型
这应该处理链接没有重定向到正确的位置。现在,关于保留默认lang,更改中间件以包含以下内容:
型
此更改应检查链接是否为defaultLocale并相应更改路径名