next-intl是专为 Next.js 设计的国际化库,支持 ICU 消息语法、日期、时间和数字的本地化格式化,具备类型安全特性,并提供基于 hooks 的 API。它与 Next.js 原生集成,兼容 App Router、服务器组件和静态渲染,同时支持国际化路由。 优点: 类型安全:利用 TypeScript 提供类型安全,减少运行时错误。 功能丰富:支持 IC...
import{NextIntlClientProvider}from'next-intl';import{getLocale,getMessages}from'next-intl/server';exportdefaultasyncfunctionRootLayout({children}:{children:React.ReactNode;}){constlocale=awaitgetLocale();// Providing all messages to the client// side is the easiest way to get startedconstmessages=...
使用next-intl 添加国际化 除了英语之外，我们还希望我们的应用程序能够提供西班牙语版本。对next-intl服务器组件的支持目前处于测试阶段，因此我们可以使用最新测试版的安装说明来设置我们的应用程序以实现国际化。格式化日期 除了添加第二语言之外，我们已经发现该应用程序不太适合英语用户，因为日期应该被格式化。为了获得...
首先，确保你已安装了next-intl。在项目根目录下创建`message`目录，并在其中为每种语言创建相应的文件，如`en.js`、`zh.js`等。这里推荐使用`languageName.js`格式来组织不同语言文件。接着，在`src`目录下创建`i18n.ts`文件，配置国际化逻辑。在这个文件中，你可以全局配置国际化加载的路径、数据...
在试过很多基于nextjs提供的开源国际化方案之后,我最终选择了next-intl. 从代码灵活度和上手成本上,next-intl完全满足大部分国际的需求场景,虽然使用上遇到了一些坑,但是都完美解决,我写在Next-Admin中把完整的国际化配置做好开源了,大家可以拿来就用。
国际化用到了 next-intl 第三方模块,核心实现如下: 代码语言:javascript 代码运行次数:0 运行 AI代码解释 import{headers}from'next/headers';import{notFound}from'next/navigation';import{getRequestConfig}from'next-intl/server';import{locales}from'./navigation';exportdefaultgetRequestConfig(async({locale})=...
import { useTranslations } from 'next-intl'; import { useState } from 'react'; import { Collapsible, CollapsibleContent, CollapsibleTrigger } from '@/components/ui/collapsible'; import { SidebarGroup, SidebarMenu, SidebarMenuButton, SidebarMenuItem, ...
nextjs-intl-fsd is a npm package designed to streamline the process of starting new Next.js projects. By using your custom template, it ensures all new projects have a consistent setup, saving you time and effort in configuring common settings, dependencies, and project structure. ...
一个使用 Next.js、Tailwind CSS 和 next-intl 构建的现代化多语言落地页模板。 特性 🌐 多语言支持(17种语言) 🎨 基于 Tailwind CSS 和 Shadcn UI 的现代界面 ⚡ 使用 Next.js 14 App Router 构建 📱 完全响应式设计 🔍 SEO 优化 🛠 TypeScript 支持 ...
$ npm install @formatjs/intl-localematcher negotiator 实现基于区域设置的路由 Next.js允许你通过子路径(/fr/products)或域名(my-site.fr/products)来国际化路由。这些信息使你能够在中间件中根据用户的首选区域设置重定向用户。 在src/目录下创建middleware.ts文件: ...