How do I install the Nextjs I18N skill?

Run npx skillmds@latest add comeonoliver/nextjs-i18n in your terminal (requires Node.js), paste this page's agent-chat prompt into Claude, Cursor, or any MCP-connected agent, or download the SKILL.md file and copy it into your agent's skills directory.

Is Nextjs I18N safe to use?

This skill has not completed SkillMD's automated safety review yet. Independent scanners report: SkillSpector: PASS, Skill Scanner: PASS. Capability flags: docs only. SkillMD never runs a skill's scripts for you; review the SKILL.md before installing.

Which AI agents work with Nextjs I18N?

This skill is tagged as working with Claude Code, Claude.ai, OpenAI Codex. SKILL.md is an open format, so most agents that read a skills directory can load it too.

Is Nextjs I18N free to use?

Yes. Installing skills from SkillMD is free, and the skill stays under its author's original license.

Who published Nextjs I18N?

ComeOnOliver (@comeonoliver) published this skill. Their other Agent Skills are listed on their SkillMD profile.

Nextjs I18N by comeonoliver — Agent Skill

Name: Nextjs I18N
Rating: 4.2 (5 reviews)
Author: ComeOnOliver

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)

ComeOnOliver Updated Sep 8, 2026 61 repo stars

File contents

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.
```
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/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.

---name: nextjs-i18ndescription: 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)---# 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 SpecificsFor 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.

Frequently asked questions