Next Intl Add Language
GitHubOfficialOriginally contributed by @tgrall as prompts/next-intl-add-language.prompt.md; moved into a skill by pull request #761Distributed by GitHub
- Skill
- Guidelines
- Software development
- MIT
- No issues found
AutoGineer summary
Written by AutoGineer from the skill’s own files, not by the author
This skill provides a structured workflow for developers looking to expand the internationalization support of their Next.js projects. It outlines the necessary steps to integrate a new language, ensuring that translation files, routing configurations, and UI components are updated consistently to maintain a functional multilingual experience.
What it does
- Defines the directory structure for translation files.
- Identifies key configuration files for routing and middleware updates.
- Provides a checklist for updating language toggle components.
- Ensures synchronization between translation JSON files and application routing.
When to use it
- When you need to add support for a new locale in an existing Next.js project.
- When scaling an application to support multiple languages using next-intl.
- When updating the language switcher component to include new language options.
Advantages
- Provides a clear, step-by-step process for internationalization updates.
- Reduces the risk of misconfiguration in routing and middleware.
- Ensures all required files are addressed during the localization process.
Usage examples
- “How do I add Spanish to my Next.js project using next-intl?”
- The agent will guide you through creating the Spanish translation file, updating the routing and middleware configurations, and adding the language to your toggle component.
Install
Download the skill as a ZIP:
https://mp-staging.autogineer.com/agent-skills/github/next-intl-add-language/downloadUnzip it into the cross-client skills folder of your project:
mkdir -p .agents/skills && unzip next-intl-add-language.zip -d .agents/skills
Documentation by tgrall
This is a guide to add a new language to a Next.js project using next-intl for internationalization,
For i18n, the application uses next-intl.
All translations are in the directory
./messages.The UI component is
src/components/language-toggle.tsx.Routing and middleware configuration are handled in:
src/i18n/routing.tssrc/middleware.ts
When adding a new language:
Translate all the content of
en.jsonto the new language. The goal is to have all the JSON entries in the new language for a complete translation.Add the path in
routing.tsandmiddleware.ts.Add the language to
language-toggle.tsx.
Files
- ATTRIBUTION.mdAdded by AutoGineer1.1 KiB
- LICENSELicence file added by AutoGineer1.0 KiB
- SKILL.md750 B
Requirements and compatibility
Written for: GitHub Copilot
Works with: Claude Code, Claude apps, OpenAI Codex, GitHub Copilot, Cursor, Gemini CLI, Kiro, OpenCode, Goose, Amp, Roo Code, JetBrains Junie, Factory Droid, Devin (ex-Windsurf), Mistral Vibe, OpenHands, Letta
“Works with” means the tool reads the open Agent Skills format; a skill written for one tool may use features others lack.
Security
No issues found by our static scan· No issues found
A static scan is not a guarantee. Skills are third-party content: review a skill before you let an agent use it.
Attribution and licence
- Originally contributed by
@tgrallas prompts/next-intl-add-language.prompt.mdmoved into a skill by pull request #761
- Publisher
- GitHub (Official)
- Distributed by
- GitHub
- Source
- github/awesome-copilot · skills/next-intl-add-language · commit 797337f
- Licence
- MIT License (redistribution allowed)
- LICENSE (added by AutoGineer from LICENSE)
- ATTRIBUTION.md (written by AutoGineer)
- Synced
- Contributors
- CypherHK, derekclair
AutoGineer is not affiliated with or endorsed by tgrall or GitHub.
Related skills
Web Artifacts Builder
AnthropicOfficial
A structured workflow for developing and bundling complex, multi-component React artifacts for Claude.
Software developmentClaude CodeClaude appsOpenAI Codex+14 moreApache-2.0Medium riskHas scriptsGitHub stars of the source repository188.6k
Frontend UI Engineering
Addy Osmani· Community
Engineering standards for building accessible, responsive, and production-ready frontend user interfaces.
Software developmentClaude CodeClaude appsOpenAI Codex+14 moreMITGitHub stars of the source repository113.9k
Ask Sonner
Emil Kowalski· Community
A comprehensive guide for implementing, styling, and troubleshooting the Sonner toast notification library in React applications.
Software developmentClaude CodeClaude appsOpenAI Codex+14 moreMITGitHub stars of the source repository54.3k
Pick UI Library
Emil Kowalski· Community
Get recommendations for frontend UI libraries based on a curated, opinionated list.
Software developmentClaude CodeClaude appsOpenAI Codex+14 moreMITGitHub stars of the source repository54.3k
Animate Expo
Emil Kowalski· Community
A senior mobile engineering guide for building React Native and Expo animations that feel correct on real devices.
Software developmentClaude CodeClaude appsOpenAI Codex+14 moreMITGitHub stars of the source repository54.3k
Prototype
Emil Kowalski· Community
A design engineering workflow for building and comparing distinct UI variants using an isolated picker harness.
Software developmentClaude CodeClaude appsOpenAI Codex+14 moreMITGitHub stars of the source repository54.3k
Download ZIP
The ZIP holds the skill’s files, its licence files and an ATTRIBUTION.md. Download next-intl-add-language.zip