k8ordo
  • UI
  • Form
  • State
  • Router
  • Static
  • Server
  • i18n
ダークモードに切り替え
k8ordo

Baselineに入った機能を、制限なく使うReactのライブラリ群。

パッケージ
  • @k8ordo/ui
  • @k8ordo/form
  • @k8ordo/state
  • @k8ordo/router
  • @k8ordo/static
  • @k8ordo/server
  • @k8ordo/i18n
UI
  • Get Started
  • Theming
  • i18n
  • Components
  • Hooks
  • Helpers
  • AIチャット
  • Generative UI
  • AIエージェント
  • Storybook
リソース
  • GitHub
  • npm

© 2026 k8o — MIT License

組版 — Noto Sans JP / M PLUS 2

@k8ordo/i18n

アプリケーションのロケール軸を持つ。ロケール集合1つからURLの区間・交渉・paramsSchema・静的化のパス一覧を導き、文言は1つずつ関数にする。関数は呼ばれた場所でロケールを読むので、サーバーでもクライアントでも同じ1行で、バンドルには呼ばれた文言しか残らない。

npmGitHub

このサイト自身が実演

ヘッダーからフッターまでの文言は @k8ordo/i18n の message から出ています。下の挨拶は引数を取る文言です。

こんにちは。

ブラウザの言語設定から交渉したロケール
判定中

greeting(name) の引数は、ja に書いた関数の引数から型が付きます。en 側を別の引数で書くとコンパイルが通りません。

使い方

ロケール集合を定義して Register に載せ、文言を message で1つずつ書く。あとは呼ぶだけ。

特徴

  • ロケールは1か所にdefineLocales(['ja', 'en']) を書くのは1回だけ。既定値・所属判定・交渉・URL区間・[locale] のスキーマは全部そこから出るので、一覧を複製する場所が無い。
  • URLの先頭区間を持つロケールはURLに住む。localize / delocalize が区間の付け外しを、paramsSchema が /fr/… を本物の404にする。pathname の残りは @k8ordo/router のもの。
  • 交渉はリストに対してnegotiate(navigator.languages) も negotiate(parseAcceptLanguage(header)) も同じ関数。要求の順に、完全一致→同じ言語→既定値で決める。
  • 文言は1つずつ関数message({ ja, en }) が1つの文言。全ロケールが揃わないと型が通らず、引数の型は書いた関数から流れる。キーの一覧も辞書オブジェクトも無い。
  • 呼ばれた文言だけがバンドルに文言は普通のexportなので、バンドラは名前で参照された分だけを残す。Server Component が引いた文言はクライアントに1バイトも運ばれない。
  • サーバーとクライアントで同じ1行Provider も hook も無い。サーバーでは受理した [locale] がその描画のロケールになり、ブラウザでは URL がロケール。nav.home() はどちらでも同じに描ける。

設計ガイド

設計ガイドは npm パッケージに同梱されています。AIコーディングエージェントは node_modules/@k8ordo/i18n/docs/ からインストールした版そのものを読みます。

Home
// i18n.ts — 一覧はここにしか書かない
export const locales = defineLocales(['ja', 'en']);
declare module '@k8ordo/i18n' {
  interface Register { locale: LocaleOf<typeof locales> }
}

// messages/nav.ts — 文言は 1 つずつ関数。全ロケールが揃わないと通らない
export const home = message({ ja: 'ホーム', en: 'Home' });
export const greeting = message({
  ja: (name: string) => `こんにちは、${name}さん`,
  en: (name) => `Hello, ${name}`, // 引数の型は ja から流れる
});

// routes/[locale]/layout.tsx — 受理したロケールがこの描画のロケールになる
export const paramsSchema = locales.paramsSchema; // /fr/… は 404

// Server Component でも Client Component でも、同じ 1 行
<h1>{nav.home()}</h1>
<p>{nav.greeting(name)}</p>