Next.js 国际化功能

构建多语言 Next.js 应用所需的一切。CDN 驱动翻译、服务器端渲染和即时语言切换。

开始使用打开控制台

CDN 驱动传输

翻译通过 Cloudflare CDN 从全球边缘节点提供。发布时自动删除缓存，加载时间低于 50ms。

了解 CDN 传输

服务器端渲染

消息在布局中通过 getMessages() 在服务器端加载。无未翻译内容闪烁，并支持 SEO 并预渲染翻译。

查看 API 参考

即时语言切换

使用 useSetLocale() 在客户端切换语言 — 无需完整页面刷新。BetterI18nProvider 从 CDN 获取新翻译并立即重新渲染。

客户端文档

动态语言发现

useManifestLanguages() 从 CDN 清单获取可用语言。在控制台添加语言后，将自动显示在应用中。

查看 Hook

类型安全的翻译键

基于 next-intl，完整支持 TypeScript。useTranslations() 提供翻译键的编译时检查 — 在运行时之前捕获错误。

类型安全 API 文档

AI 翻译

在 better-i18n 控制台获取 AI 翻译建议。人工审批工作流程确保质量。将整个项目的翻译在几分钟内完成，而不是几天。

试用控制台

中间件语言检测

betterMiddleware() 从 URL 路径、Cookie 或 Accept-Language 头部检测用户语言区域。支持 Clerk 风格的回调模式，便于身份验证集成。

中间件配置指南

控制台管理

在 dash.better-i18n.com 管理翻译、语言和命名空间。实时协作、版本历史和 GitHub 集成。

打开控制台

Integration Journey

Get up and running in 4 simple steps.

Install

Add the SDK to your project

bun add @better-i18n/next

Configure

Create your i18n config

export const i18n = createI18n({ ... })

Wrap Provider

Add BetterI18nProvider to your layout

<BetterI18nProvider>

Use Translations

Call useTranslations() in any component

const t = useTranslations("ns")

Framework Compatibility

better-i18n works with all major React frameworks out of the box.

Feature	Next.js	Expo	Remix	Hono	TanStack
CDN Fetch	✓	✓	✓	✓	✓
ISR / Revalidation	✓	—	✓	—	✓
useSetLocale()	✓	✓	✓	✓	✓
useFormatter()	✓	✓	✓	✓	✓
LocaleDropdown	✓	✓	✓	✓	✓
SSR Support	✓	—	✓	✓	✓

快速集成

在 5 分钟内为您的 Next.js 应用添加国际化。阅读完整指南

i18n.config.ts

// i18n.config.ts
import { createI18n } from "@better-i18n/next";

export const i18n = createI18n({
  project: "your-org/your-project",
  defaultLocale: "en",
});

// middleware.ts
import { i18n } from "./i18n.config";
export default i18n.betterMiddleware();

// app/[locale]/layout.tsx
const messages = await i18n.getMessages(locale);
<BetterI18nProvider config={i18n.config} locale={locale} messages={messages}>
  {children}
</BetterI18nProvider>

// Any component
const t = useTranslations("namespace");
return <h1>{t("title")}</h1>;

准备支持多语言了吗？

创建免费账户，添加您的语言，开始翻译。加入数千个开发者的行列，为全球用户构建应用。

阅读文档打开控制台

正在加载...

Feature

Next.js

Expo

Remix

Hono

TanStack

CDN Fetch

✓

ISR / Revalidation

✓

—

✓

—

✓

useSetLocale()

✓

useFormatter()

✓

LocaleDropdown

✓

SSR Support

✓

—

✓

// i18n.config.ts import { createI18n } from "@better-i18n/next"; export const i18n = createI18n({ project: "your-org/your-project", defaultLocale: "en", }); // middleware.ts import { i18n } from "./i18n.config"; export default i18n.betterMiddleware(); // app/[locale]/layout.tsx const messages = await i18n.getMessages(locale); <BetterI18nProvider config={i18n.config} locale={locale} messages={messages}> {children} </BetterI18nProvider> // Any component const t = useTranslations("namespace"); return <h1>{t("title")}</h1>;