# Localization

> Best practices and rules for Internationalization using next-intl. Use this when adding new UI components or modifying text in the application. Use when this capability is needed.

- Skill: `tomevault-io/localization` (Agent Skill, multi-file: 2 files)
- Install (CLI): `npx skillmds@latest add tomevault-io/localization`
- Raw SKILL.md: https://api.skillmd.com/api/skills/tomevault-io/localization/raw
- Safety review: pending (external: skill-scanner PASS, skillspector PASS)
- Works with: Claude Code, Claude.ai, OpenAI Codex
- Category: Coding & Dev Tools
- Author: tomevault-io (https://skillmd.com/u/tomevault-io)
- Updated: 2026-09-17
- Page: https://skillmd.com/skills/tomevault-io/localization

---


# Internationalization Guide (next-intl)

## Core Principles

1. **No Hardcoded Strings**: NEVER hardcode user-facing text or strings in the UI. All text must be rendered using `next-intl`.
2. **Default Locale**: The project currently supports **Thai (th)** only. Treat `th` as the default and fallback locale.

## Implementation Strategy

### Client Components

- Use the `useTranslation` hook for client-side translations.
- **Pattern**:

  ```tsx
  "use client";
  import { useTranslation } from "next-intl";

  export default function MyComponent() {
    const t = useTranslation("HomePage"); // Specify namespace
    return <button>{t("submitButton")}</button>;
  }
  ```

---
> Source: [iwindd/istore](https://github.com/iwindd/istore) — distributed by [TomeVault](https://tomevault.io).
<!-- tomevault:4.0:skill_md:2026-06-30 -->