使用next.js在多语言网站中更改语言

bejyjqdl  于 2023-08-04  发布在  其他
关注(0)|答案(1)|浏览(261)

我最近开始使用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
有人能建议吗?
我已经检查了多个博客,但首先他们谈论页面路由(旧系统),+他们包括一些其他的软件包,我真的不需要简单。虽然我试过那些库,但无论如何都不能正确地工作。

isr3a4wc

isr3a4wc1#

在中间件函数中,有一行代码检查路径名是否丢失,如下所示:

const pathnameIsMissingLocale = locales.every(
  (locale) => !pathname.startsWith(`/${locale}/`) && pathname !== `/${locale}`
)

字符串
但是这样做你是在要求它检查路径名是否包含所有的locale,你应该寻找.some(),因为如果它匹配其中一个locale,就足以知道它是正确的。
因此,将其更改为:

const pathnameIsMissingLocale = locales.some(
  (locale) => !pathname.startsWith(`/${locale}/`) && pathname !== `/${locale}`
)


这应该处理链接没有重定向到正确的位置。现在,关于保留默认lang,更改中间件以包含以下内容:

//...
const url = req.nextUrl.clone()
const pathnameIsMissingLocale = locales.some(
  (locale) => !pathname.startsWith(`/${locale}/`) && pathname !== `/${locale}`
)
const isDefaultLocale = !pathNameIsMissingLocale || pathname.startsWith(`/${defaultLocale}/`)

if (pathnameIsMissingLocale) {
    const locale = getLocale(request);
    
    locale === defaultLocale 
      ? url.pathname = `/${pathname}`
      : url.pathname = `/${locale}/${pathname}`
    
    return NextResponse.redirect(url)
}
if(isDefaultLocale) {
  url.pathname = `/${pathname}`
  return NextResponse.redirect(url)
}
//...


此更改应检查链接是否为defaultLocale并相应更改路径名

相关问题