"use client"; import { useLocale } from "next-intl"; import { localeItems, useRouter, usePa...
'use client'; import { map } from 'lodash-es'; import { ChevronRight } from 'lucide-react'; import { usePathname, useRouter } from 'next/navigation'; import { useTranslations } from 'next-intl'; import { useState } from 'react'; import { Collapsible, CollapsibleContent, CollapsibleTrig...
由于next项目支持客户端渲染和服务端渲染,所以使用next-intl的方式也是有区别的,如果我们在页面中出现next-intl相关的服务端渲染报错, 可以在页面同级添加layout.tsx, 然后做如下封装: import { NextIntlClientProvider, useMessages } from 'next-intl'; type Props = { children: React.ReactNode; params: {loca...
'use client'; import { map } from 'lodash-es'; import { ChevronRight } from 'lucide-react'; import { usePathname, useRouter } from 'next/navigation'; import { useTranslations } from 'next-intl'; import { useState } from 'react'; import { Collapsible, CollapsibleContent, CollapsibleTrig...
1. 首先我们先安装 next-intl : 复制 pnpmaddnext-intl 1. 2. 在 Nextjs 项目根目录中创建 message 目录, 然后新建语言包文件: 复制 # messages-zh.json-en.json 1. 2. 3. 当然如果有其它语言翻译需求, 也可以添加对应的语言文件,这里给大家推荐一个语言名称映射表: ...
'use client';import {useRouter} from'next-intl/client';exportdefaultfunctionOrderBySelect({orderBy, children}) {const router = useRouter();functiononChange(event) {// The `useRouter` hook from `next-intl` automatically// considers a potential locale prefix of the pathname. router.replace(...
$ npm install @formatjs/intl-localematcher negotiator 实现基于区域设置的路由 Next.js允许你通过子路径(/fr/products)或域名(my-site.fr/products)来国际化路由。这些信息使你能够在中间件中根据用户的首选区域设置重定向用户。 在src/目录下创建middleware.ts文件: ...
Next, we can use Middleware to add custom routing rules:// pages/_middleware.ts import { NextRequest, NextResponse } from 'next/server' const PUBLIC_FILE = /\.(.*)$/ export function middleware(request: NextRequest) { const shouldHandleLocale = !PUBLIC_FILE.test(request.nextUrl.pathname)...
request.headers.forEach((value, key) =>(negotiatorHeaders[key] = value));// @ts-ignore locales are readonlyconstlocales:string[] = i18n.locales;// Use negotiator and intl-localematcher to get best localeletlanguages =newNegotiator({headers: negotiatorHeaders }).languages( ...
supported locales: SUPPORTED_LOCALES, // Used when no locale matches defaultLocale: DEFAULT_LOCALE, }) // Lightweight wrappers around Next.js' navigation APIs // that will consider the routing configuration export const { Link, redirect, usePathname, useRouter, getPathname } = createNavigation(...