# Hoangnguyen0403 Agent Skills Standard Nextjs I18N

> Internationalization (i18n)

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

---

# Internationalization (i18n)

## **Priority: P2 (MEDIUM)**

Maintain single source of truth for locales and ensure SEO-friendly sub-path routing.

## Workflow: Add i18n to Next.js App Router Project

1. Install `next-intl` and create `messages/en.json`, `messages/fr.json`, etc.
2. Add locale detection middleware in `middleware.ts`
3. Create `app/[lang]/layout.tsx` with locale param
4. Load translations server-side via `getMessages()`
5. Add `hreflang` tags in `generateMetadata`
6. Pre-render locales with `generateStaticParams`
7. Verify: run `next build` and confirm all locale paths render

## Middleware Example

See [implementation examples](references/implementation.md)

## Implementation Guidelines

- **Locale Routing**: Follow URL-first approach for SEO. Use dynamic segments in App Router (`app/[lang]/page.tsx`) and `i18n` configuration in `next.config.js` for Pages Router.
- **Library Selection**: Use `next-intl` for App Router (modern) or `react-intl` / `next-translate` for legacy apps.
- **Detection**: Implement middleware localization in `middleware.ts` to detect user language from `Accept-Language` headers or cookies and perform redirects.
- **Server-Side**: Load translation `messages/*.json` dictionaries in Server Components to keep client bundle small.
- **SEO**: Ensure `hreflang` tags generated correctly in `metadata` API for all translated routes.
- **Static Generation**: Use `generateStaticParams` to pre-render localized versions of static pages at build time.

### Library Specifics

For detailed setup with common libraries, refer to:

- [references/react-intl.md](references/react-intl.md)
- [references/next-intl.md](references/next-intl.md)

## Anti-Patterns

- **No hardcoded strings in JSX**: Use translation keys; never commit raw text.
- **No client-side translation bundles**: Load dictionaries server-side with `getMessages()`.
- **No mixed URL locale patterns**: Use sub-paths or domains consistently.

---
> Converted and distributed by [TomeVault](https://tomevault.io/claim/HoangNguyen0403) — claim your Tome and manage your conversions.
<!-- tomevault:4.0:skill_md:2026-04-16 -->