amannn/next-intl

Next.jsアプリにメッセージの多言語化、日付・数値の地域化、多言語ルーティングを組み込むライブラリです。

開発の材料自由に使える · MITWeb・Next.js・フルスタックTypeScript難易度
4,3750 保存
393フォーク37Issue
デモ・公式サイトをひらくnext-intl.dev

中辛 の解説

Next.jsアプリのUIテキストを複数言語に対応させるライブラリです。useTranslations フックでメッセージを取得する際、ICUメッセージ構文で変数の挿入、複数形・条件分岐を記述でき、JSONファイルに言語ごとの翻訳文を管理します。日付・時刻・数値フォーマットは地域設定と時間帯を自動認識し、サーバー・クライアント間の差異を吸収します。TypeScriptの型安全性で翻訳キーをコンパイル時に検証でき、App Router・Server Components・静的生成などに対応するため、プロジェクトの規模や要件に応じて最適なレンダリング方式を選択できます。言語ごとにパスを分ける多言語ルーティングで、SEO対応も可能です。別途ツール eloqnt/cli を使うと、ソースコードと翻訳ファイルの整合性を自動チェックできます。

こんなリポジトリです

こんなときに便利です

  • 複数言語のUIを持つEコマースサイトで、商品数・価格を地域設定に合わせて表示する場合
  • 多国籍チーム向けのSaaSアプリケーションで、ユーザーの言語選択に応じてメッセージと日付表記を自動切り替えする場合
  • SEO対策が必要なコンテンツサイトで、言語ごとに異なるURLパスを提供しながら翻訳テキストを一元管理する場合

主な機能

ICUメッセージ形式による複数形・条件分岐・変数補間日付・時刻・数値の地域化フォーマットTypeScriptの型チェックでメッセージキーを検証

ほかとの違い

Server Components・App Router・静的生成など最新のNext.js機能に標準対応し、サーバー・クライアント間のタイムゾーン差異を自動吸収する仕組みが組み込まれています。

このリポジトリの作り方

はじめてですか? むずかしくありません — 上から順にたどれば、自分の環境で動かして味見できます。

準備するもの

  • Next.js プロジェクト
  • TypeScript(型安全機能を使う場合)

すぐに始める

  1. プロジェクトに依存関係を追加します。
npm install next-intl
  1. プロジェクトルートに i18n フォルダを作成し、言語ごとの翻訳ファイル(例: en.json、de.json)を配置します。

  2. Next.jsのルート設定ファイル(app.tsx または _app.tsx)で next-intl を初期化し、言語を指定します(詳細は公式ドキュメント https://next-intl.dev を参照)。

  3. コンポーネント内で useTranslations フックを使用してメッセージを取得します。

import {useTranslations} from 'next-intl';

export default function Component() {
  const t = useTranslations('namespace');
  return <p>{t('messageKey')}</p>;
}

READMEに詳細な実行手順が記載されていないため、公式ドキュメント(https://next-intl.dev)を参照して、プロジェクト構成に応じた初期設定を行ってください。

ギット飯トライで味見

入れるのが面倒で少し不安だったなら — 安全スキャンからインストールまで、ターミナル一行で終わります。

ターミナルに貼り付ければ、ギット飯の安全スキャン → 隔離フォルダへ clone → インストール → 実行方法の案内まで自動です。はじめてでも大丈夫 — この一行だけです。

npx gitbap-try amannn/next-intl

Node.js さえあれば、インストールなしで動きます · ギット飯トライとは? →

スター推移 · 7日

4,3757日間の増加数を計算するための比較データが不足しています

確認日時

使いやすさ · まねしやすいか

ベストサンプルサンプル評点 62/100
  • ゆるいライセンス
  • テストあり
  • サンプル集
  • 最近の更新
  • AGENTS.md
  • llms.txt
  • テンプレート

最近の更新あり · 2020 年に作成

「Web・Next.js・フルスタック」 こういうリポジトリを毎週受け取りませんか?

毎週月曜の朝、選んだ一膳だけ。広告なし · いつでも解除。

自分のリポジトリですか? README にギット飯バッジを貼る
[![깃밥](https://www.gitbap.com/badge/amannn/next-intl.svg)](https://www.gitbap.com/r/amannn/next-intl)
Claude からそのまま使う — ギット飯のつなぎ方

ギット飯を Claude につなぐと、こうしたリポジトリを Claude・Cursor・Codex から直接さがして試せます。

方法 ① コネクタ URL

Claude の設定 → コネクタにこのアドレスを貼り付け。

https://www.gitbap.com/api/mcp
方法 ② プラグイン(試用まで)

プラグインを入れると /gitbap-trending·/gitbap-try のスラッシュコマンドで、その場でリポジトリを試せます。Claude Code で下の 2 行を順に実行してください。

/plugin marketplace add jakeparkcolde/gitbap-cowork
/plugin install gitbap-cowork@gitbap
つなぎ方をくわしく →

AI が README をもとに要約しました · 原文を見る