Next.jsの国際化機能

Next.jsの多言語アプリ構築に必要なすべて。CDN駆動の翻訳、サーバーサイドレンダリング、即座のロケール切り替え。

始めるダッシュボードを開く

CDN駆動の配信

翻訳はCloudflare CDN経由で世界中のエッジロケーションから配信されます。公開時の自動キャッシュ無効化により50ms未満の読み込み時間。

CDN配信について詳しく知る

サーバーサイドレンダリング

メッセージはレイアウトのgetMessages()を使ってサーバーサイドで読み込まれます。未翻訳コンテンツのフラッシュなし、事前レンダリングされた翻訳でSEOに完全対応。

APIリファレンスを見る

即座のロケール切り替え

useSetLocale()でクライアントサイドで言語を切り替え—ページの全体リロード不要。BetterI18nProviderがCDNから新しい翻訳を取得して即座に再レンダリングします。

クライアントサイドのドキュメント

動的な言語検出

useManifestLanguages()はCDNマニフェストから利用可能な言語を取得します。ダッシュボードで言語を追加するだけで、自動的にアプリに表示されます。

フックを詳しく見る

型安全な翻訳キー

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>;