nextjs-i18n
Best practices for multi-language handling, locale routing, and detection strategies across App and Pages Router. Use when adding i18n, locale routing, or language detection in Next.js. (triggers: middleware.ts, app/[lang]/**, pages/[locale]/**, messages/*.json, next.config.js, i18n, locale, translation, next-intl, react-intl, next-translate)
Best use case
nextjs-i18n is best used when you need a repeatable AI agent workflow instead of a one-off prompt.
Best practices for multi-language handling, locale routing, and detection strategies across App and Pages Router. Use when adding i18n, locale routing, or language detection in Next.js. (triggers: middleware.ts, app/[lang]/**, pages/[locale]/**, messages/*.json, next.config.js, i18n, locale, translation, next-intl, react-intl, next-translate)
Teams using nextjs-i18n should expect a more consistent output, faster repeated execution, less prompt rewriting.
When to use this skill
- You want a reusable workflow that can be run more than once with consistent structure.
When not to use this skill
- You only need a quick one-off answer and do not need a reusable workflow.
- You cannot install or maintain the underlying files, dependencies, or repository context.
Installation
Claude Code / Cursor / Codex
Manual Installation
- Download SKILL.md from GitHub
- Place it in
.claude/skills/nextjs-i18n/SKILL.mdinside your project - Restart your AI agent — it will auto-discover the skill
How nextjs-i18n Compares
| Feature / Agent | nextjs-i18n | Standard Approach |
|---|---|---|
| Platform Support | Not specified | Limited / Varies |
| Context Awareness | High | Baseline |
| Installation Complexity | Unknown | N/A |
Frequently Asked Questions
What does this skill do?
Best practices for multi-language handling, locale routing, and detection strategies across App and Pages Router. Use when adding i18n, locale routing, or language detection in Next.js. (triggers: middleware.ts, app/[lang]/**, pages/[locale]/**, messages/*.json, next.config.js, i18n, locale, translation, next-intl, react-intl, next-translate)
Where can I find the source code?
You can find the source code on GitHub using the link provided at the top of the page.
SKILL.md Source
# Internationalization (i18n)
## **Priority: P2 (MEDIUM)**
Maintain a single source of truth for locales and ensure SEO-friendly sub-path routing.
## Implementation Guidelines
- **Locale Routing**: Follow the **URL-first approach** for SEO. Use **dynamic segments** in the App Router (e.g., **`app/[lang]/page.tsx`**) and the **`i18n`** configuration in `next.config.js` for the Pages Router.
- **Library Selection**: Use **`next-intl`** for the 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 the client bundle small. Use **`getMessages()`** or **`requestConfig`** patterns.
- **SEO**: Ensure **`hreflang`** tags are generated correctly in the **`metadata`** API for all translated routes.
- **Static Generation**: Use **`generateStaticParams`** to pre-render localized versions of static pages at build time.
```js
module.exports = {
i18n: {
locales: ['en', 'fr', 'vi'],
defaultLocale: 'en',
},
};
```
### 3. 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.Related Skills
i18n-expert
This skill should be used when setting up, auditing, or enforcing internationalization/localization in UI codebases (React/TS, i18next or similar, JSON locales), including installing/configuring the i18n framework, replacing hard-coded strings, ensuring en-US/zh-CN coverage, mapping error codes to localized messages, and validating key parity, pluralization, and formatting.
readme-i18n
Use when the user wants to translate a repository README, make a repo multilingual, localize docs, add a language switcher, internationalize the README, or update localized README variants in a GitHub-style repository.
react-nextjs-development
React and Next.js 14+ application development with App Router, Server Components, TypeScript, Tailwind CSS, and modern frontend patterns.
nextjs-supabase-auth
Expert integration of Supabase Auth with Next.js App Router Use when: supabase auth next, authentication next.js, login supabase, auth middleware, protected route.
nextjs-best-practices
Next.js App Router principles. Server Components, data fetching, routing patterns.
nextjs-app-router-patterns
Master Next.js 14+ App Router with Server Components, streaming, parallel routes, and advanced data fetching. Use when building Next.js applications, implementing SSR/SSG, or optimizing React Server Components.
i18n-localization
Internationalization and localization patterns. Detecting hardcoded strings, managing translations, locale files, RTL support.
skill-i18n
Translate SKILL.md and README.md files into multiple languages for sharing skills internationally
i18n-automation
Automate internationalization and localization workflows for web applications with translation, key generation, and library setup
nextjs-15-specialist
Use when working with Next.js 15 features, App Router, Server Components, Server Actions, or data fetching patterns. Ensures correct usage of Server vs Client Components and modern Next.js patterns.
nextjs-15-patterns
Next.js 15 App Router patterns and best practices.
frontend-nextjs-app-router
Use when working with Next.js App Router tasks - creating pages in /app/, setting up dynamic routes ([id]/page.tsx), implementing nested layouts/templates (layout.tsx), optimizing Server/Client components, or building ERP role-based pages (admin/teacher/student dashboards). Auto-use for all /app/ directory operations, dynamic routing, and App Router-specific features.