Next.jsアプリを国際化するための最も簡単な翻訳ソリューション
中辛 の解説
TypeScriptで実装されたNext.js専用の国際化フレームワークです。App Router（Server Components・Client Components・middleware）とPages Router両方に対応し、locale-in-path（/en/about形式）とcookie型のクリーンURLモード、さらに両ルーターの混合運用も可能です。難易度は中程度で、getT() / useT() / createProxy() の3つのを理解すれば基本的な多言語対応が実装できます。i18next・react-i18nextの標準的な機能（バックエンド選択・名前空間・フォーマット）も全て利用でき、Vercelなどのサーバーレス環境でも動作するよう設計されています。
이런 레포예요
이럴 때 쓰면 좋아요
- 複数言語に対応したNext.jsアプリをlocale-in-pathで運営したい場合
- Vercelなどのサーバーレス環境で翻訳ファイルを安全にバンドルしたい場合
- 既存のPages RouterアプリをApp Routerへ段階的に移行しながら多言語対応を維持したい場合
핵심 기능
대안 대비 차별점
i18nextとreact-i18nextの上の薄い適応層として、Next.js固有のサーバー・クライアント分割やハイドレーション、サーバーレス環境でのリソース管理を自動的に処理し、従来の手動配線を排除している点が特徴です。
食べた人たち
実際に使ってみた人の記録です — 一言も完走の記録も、確認のうえで公開しています。
このリポジトリの作り方
はじめてですか？ むずかしくありません — 上から順にたどれば、自分の環境で動かして味見できます。
준비물
- Next.js 12.2以上
- Node.js 14以上
- React 17以上
すぐ動かしてみるNode.js (npm)
ギット飯がリポジトリの構成を確認して組み立てた実行コマンドです。ターミナルに貼り付ければ、取得から実行までまとめて進みます。
git clone --depth 1 https://github.com/i18next/next-i18next.git && cd next-i18next && npm install
실행 명령은 README를 확인하세요.
コードは自分の環境で動きます — はじめて見るリポジトリなら、中身にひととおり目を通してから実行するのがおすすめです。
README가 안내하는 자세한 단계 보기
- インストール
npm install next-i18next i18next react-i18next
- 翻訳ファイルを作成（例：
app/i18n/locales/）
app/i18n/locales/en/common.json
app/i18n/locales/de/common.json
- 設定ファイルを作成（
i18n.config.ts）
import type { I18nConfig } from 'next-i18next/proxy'
const i18nConfig: I18nConfig = {
supportedLngs: ['en', 'de'],
fallbackLng: 'en',
defaultNS: 'common',
ns: ['common'],
resourceLoader: (language, namespace) =>
import(`./app/i18n/locales/${language}/${namespace}.json`),
}
export default i18nConfig
- プロキシファイルを作成（
proxy.ts）
import { createProxy } from 'next-i18next/proxy'
import i18nConfig from './i18n.config'
export const proxy = createProxy(i18nConfig)
export const config = {
matcher: ['/((?!api|_next/static|_next/image|assets|favicon.ico|sw.js|site.webmanifest).*)'],
}
- ルートレイアウトを設定（
app/[lng]/layout.tsx）
import { initServerI18next, getT, getResources, generateI18nStaticParams } from 'next-i18next/server'
import { I18nProvider } from 'next-i18next/client'
import i18nConfig from '../../i18n.config'
initServerI18next(i18nConfig)
export async function generateStaticParams() {
return generateI18nStaticParams()
}
export default async function RootLayout({
children,
params,
}: {
children: React.ReactNode
params: Promise<{ lng: string }>
}) {
const { lng } = await params
const { i18n } = await getT()
const resources = getResources(i18n)
return (
<html lang={lng}>
<body>
<I18nProvider language={lng} resources={resources}>
{children}
</I18nProvider>
</body>
</html>
)
}
- Server Componentで翻訳を使用（
app/[lng]/page.tsx）
import { getT } from 'next-i18next/server'
export default async function Home() {
const { t } = await getT('common')
return <h1>{t('title')}</h1>
}
ギット飯トライで味見
入れるのが面倒で少し不安だったなら — 安全スキャンからインストールまで、ターミナル一行で終わります。
ターミナルに貼り付ければ、ギット飯の安全スキャン → 隔離フォルダへ clone → インストール → 実行方法の案内まで自動です。はじめてでも大丈夫 — この一行だけです。
npx gitbap-try i18next/next-i18next
Node.js さえあれば、インストールなしで動きます · ギット飯トライとは？ →
スター推移 · 7日
使いやすさ · まねしやすいか
- ゆるいライセンス
- テストあり
- サンプル集
- 最近の更新
- AGENTS.md
- llms.txt
- テンプレート
最近の更新あり · 2018 年に作成
「웹·Next.js·풀스택」 こういうリポジトリを毎週受け取りませんか？
毎週月曜の朝、選んだ一膳だけ。広告なし · いつでも解除。
自分のリポジトリですか？ README にギット飯バッジを貼る
[](https://www.gitbap.com/r/i18next/next-i18next)Claude からそのまま使う — ギット飯のつなぎ方
ギット飯を Claude につなぐと、こうしたリポジトリを Claude・Cursor・Codex から直接さがして試せます。
Claude の設定 → コネクタにこのアドレスを貼り付け。
https://www.gitbap.com/api/mcpプラグインを入れると /gitbap-trending·/gitbap-try のスラッシュコマンドで、その場でリポジトリを試せます。Claude Code で下の 2 行を順に実行してください。
/plugin marketplace add jakeparkcolde/gitbap-cowork/plugin install gitbap-cowork@gitbapAI が README をもとに要約しました · 原文を見る