Catalyzer

Internationalization. Routing, middleware, translations, and 10 supported languages.

Wraps next-intl into a shared module consumed by both apps. Defines supported locales, provides locale-aware navigation helpers, exports message files, and exposes the middleware and plugin for Next.js.

Directory Structure

index.ts

routing.ts

navigation.ts

middleware.ts

plugin.ts

server.ts

i18n.d.ts

en.json, tr.json, es.json, fr.json, de.json

pt.json, it.json, ru.json, ja.json, zh.json

Supported Languages

Code	Language	Native Name
`en`	English	English
`tr`	Turkish	Türkçe
`es`	Spanish	Español
`fr`	French	Français
`de`	German	Deutsch
`pt`	Portuguese	Português
`it`	Italian	Italiano
`ru`	Russian	Русский
`ja`	Japanese	日本語
`zh`	Chinese	中文

Package Exports

Each file in this package maps to a specific export path in package.json:

Export	File	Used by
`@workspace/i18n`	`index.ts`	Both apps (messages, types, re-exports)
`@workspace/i18n/routing`	`routing.ts`	Both apps (locale config, routing)
`@workspace/i18n/navigation`	`navigation.ts`	Both apps (Link, useRouter, usePathname)
`@workspace/i18n/middleware`	`middleware.ts`	Web app (`proxy.ts`)
`@workspace/i18n/plugin`	`plugin.ts`	Both apps (`next.config.ts`)
`@workspace/i18n/server`	`server.ts`	Web app (server components)
`@workspace/i18n/messages/*`	`messages/*.json`	Direct JSON access

Source Files

src/routing.ts

import { defineRouting } from "next-intl/routing";

export const localeConfig = {
  en: { flag: "🇬🇧", label: "English", nativeName: "English" },
  tr: { flag: "🇹🇷", label: "Turkish", nativeName: "Türkçe" },
  // ... 8 more (see Supported Languages table above)
} as const;

export const locales = Object.keys(localeConfig) as Array<
  keyof typeof localeConfig
>;

export const routing = defineRouting({
  locales: locales,
  defaultLocale: "en",
});

Each locale entry provides flag emoji, English label, and native name for the language toggle UI.

The remaining files (plugin.ts, middleware.ts, server.ts) are one-line re-exports from next-intl:

// plugin.ts    → export { default } from "next-intl/plugin";
// middleware.ts → export { default } from "next-intl/middleware";
// server.ts    → export { getLocale, getRequestConfig, getTranslations } from "next-intl/server";

Message Structure

Messages are organized by component namespace. Each top-level key maps to a component:

messages/en.json

{
  "HomePage": { "title": "You are on the Home Page." },
  "OverviewPage": { "title": "You are on the Dashboard/Overview Page." },
  "AnalyticsPage": { "title": "You are on the Dashboard/Analytics Page." },
  "ReportsPage": { "title": "You are on the Dashboard/Reports Page." },
  "Greet": { "placeholder": "Enter a name...", "button": "Greet", "error": "...", "successGreeting": "...", "loadingTauri": "...", "loadingWeb": "...", "missingName": "..." },
  "LanguageCard": { "title": "Language", "description": "Select your preferred language" },
  "ModeCard": { "title": "Modes", "description": "...", "light": "Light", "dark": "Dark", "system": "System" },
  "SidebarVariantCard": { "title": "Sidebar Variant", "sidebar": "Sidebar", "floating": "Floating", "inset": "Inset" },
  "ThemesList": { "title": "Themes", "searchPlaceholder": "Search themes...", "sortBy": "Sort by", ... },
  "Navigation": { "home": "Home", "dashboard": "Dashboard", "overview": "Overview", "analytics": "Analytics", "reports": "Reports", ... },
  "HotkeysDialog": { "title": "Keyboard Shortcuts", "general": "General", "navigation": "Navigation", "commandPalette": "...", "goHome": "...", ... },
  "CommandPalette": { "search": "Type a command or search...", "noResults": "No results found.", "general": "General", "navigation": "Navigation", ... }
}

All 10 language files follow this exact structure. Missing keys fall back to the default locale (English).

For step-by-step instructions on adding new translation keys or new languages, see the Managing Translations guide.

Usage

// Client component with translations
import { useTranslations } from "@workspace/i18n";

function HomePage() {
  const t = useTranslations("HomePage");
  return <h1>{t("title")}</h1>;
}

// Locale-aware navigation (not next/link)
import { Link } from "@workspace/i18n/navigation";

<Link href="/settings">Settings</Link>
// Renders: /en/settings, /tr/settings, etc.

Always import Link, useRouter, and usePathname from @workspace/i18n/navigation, not from next/link or next/navigation. Using the Next.js defaults bypasses locale prefixing.

i18n Package