i18n-at というライブラリを書いた

// locales/en.json
{
  "dashboard.title": "Dashboard",
  "dashboard.welcome": "Welcome, {name}!"
}

// locales/ja.json
{
  "dashboard.title": "ダッシュボード",
  "dashboard.welcome": "{name} さん、ようこそ！"
}

// コンポーネントでの使用
function Dashboard() {
  const { t } = useTranslation();

  // ❌ 文字列リテラル - エラーが起きやすく型安全性がない
  return (
    <div>
      <h1>{t("dashboard.title")}</h1>
      <p>{t("dashboard.welcome", { name: "User" })}</p>
    </div>
  );
}

// ✅ コンポーネントと同じ場所でメッセージを定義
export const { messages } = defineMessages({
  en: {
    dashboard: {
      title: "Dashboard",
      welcome: "Welcome, {$name}!",
    },
  },
  ja: {
    dashboard: {
      title: "ダッシュボード",
      welcome: "{$name} さん、ようこそ！",
    },
  },
});

function Dashboard() {
  const { t, m } = useI18n(messages);

  // ✅ 完全な型安全性とIDEジャンプ
  return (
    <div>
      <h1>{t(m.dashboard.title)}</h1>
      <p>{t(m.dashboard.welcome, { name: "User" })}</p>
    </div>
  );
}

const { t, m } = useI18n(messages);

// ✅ 有効 - TypeScriptがメッセージの存在を確認
t(m.dashboard.title);

// ❌ TypeScriptエラー - タイポを即座に検出
t(m.dashboard.titl); // Property 'titl' does not exist

// ❌ TypeScriptエラー - 必須パラメータの不足
t(m.dashboard.welcome); // Missing 'name' parameter

// ✅ 有効 - すべてのパラメータが提供されている
t(m.dashboard.welcome, { name: "Alice" });

export const { messages } = defineMessages({
  en: {
    dashboard: {
      title: "Dashboard",
      subtitle: "Your overview", // ← 使われていない？すぐに分かる！
      welcome: "Welcome, {$name}!",
    },
  },
});

// titleとwelcomeのみ使用 - subtitleが明らかに未使用
function Dashboard() {
  const { t, m } = useI18n(messages);
  return (
    <div>
      <h1>{t(m.dashboard.title)}</h1>
      <p>{t(m.dashboard.welcome, { name: "User" })}</p>
    </div>
  );
}

const { messages } = defineMessages({
  en: { greeting: "Hello, {$name}!" },
  ja: { greeting: "こんにちは、{$name}！" },
});

// TypeScriptが自動的に型を推論
const { t, m } = useI18n(messages);

// ✅ m.greeting は string 型として認識される
// ✅ name パラメータが必須であることも型で検出
t(m.greeting, { name: "太郎" });

// ❌ パラメータ不足でコンパイルエラー
t(m.greeting);

// ❌ 存在しないキーでコンパイルエラー
t(m.hello);

// Server Componentsでの使用
import { getI18n } from "i18n-at";
import { messages } from "./messages";

export default function ServerPage({
  params: { locale },
}: {
  params: { locale: string };
}) {
  const { t, m } = getI18n(messages, locale);
  return (
    <div>
      <h1>{t(m.dashboard.title)}</h1>
      <p>{t(m.dashboard.welcome, { name: "User" })}</p>
    </div>
  );
}

// Client Componentsでの使用には Provider が必要
// app/dashboard/page.tsx
import { I18nClientProvider } from "i18n-at";
import DashboardClient from "./DashboardClient";

export default function DashboardPage({
  params: { locale },
}: {
  params: { locale: string };
}) {
  return (
    <I18nClientProvider locale={locale}>
      <DashboardClient />
    </I18nClientProvider>
  );
}

// app/dashboard/DashboardClient.tsx
("use client");
import { useI18n } from "i18n-at";
import { messages } from "./messages";

export default function DashboardClient() {
  const { t, m } = useI18n(messages);
  return (
    <div>
      <h1>{t(m.dashboard.title)}</h1>
      <p>{t(m.dashboard.welcome, { name: "User" })}</p>
    </div>
  );
}

// 新しいコンポーネント - i18n-atを使用
function NewComponent() {
  const { messages } = defineMessages({
    en: { title: "New Feature" },
    ja: { title: "新機能" },
  });
  const { t, m } = useI18n(messages);

  return <h1>{t(m.title)}</h1>;
}

// 既存のコンポーネント - 従来の方法のまま
function LegacyComponent() {
  const { t } = useTranslation();
  return <h1>{t("legacy.title")}</h1>;
}