skills.rest
zoonk
zoonkOFFICIAL
Explore all skills by this author →
Website𝕏@zoonkcomGitHub

zoonk-translations

Streamline Next.js internationalization with next-intl JSON message files.

146|12|Updated Jan 30, 2025
Search Tags:#react#localization#i18n#translations#internationalization#next-intl
One-click install
npx skills add https://github.com/zoonk/zoonk --skill zoonk-translations
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: zoonk-translations
Source: https://github.com/zoonk/zoonk/tree/main/.agents/skills/zoonk-translations
Command: npx skills add https://github.com/zoonk/zoonk --skill zoonk-translations

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

Manage and apply translations across a Next.js app with a consistent workflow, ensuring UI content is localized and easy to maintain.

Core Features & Use Cases

  • Server Components: Use getTranslations to load locale data server-side without locale in the call.
  • Client Components: Use useTranslations to render localized strings on the client.
  • Workflow: Maintain JSON message files (e.g., messages/en.json, messages/es.json) and add translation keys centrally.
  • Use Case: Add a new language and render localized labels across pages with automatic fallbacks.

Quick Start

Configure next-intl in your Next.js app, load translations from messages files, and render localized content with useTranslations.

Frequently Asked Questions about zoonk-translations

High-intent search queries and answers about installing and using this skill.

FAQPage Schema
How do I implement internationalization in a Next.js app using next-intl?▼

Manage internationalization in Next.js by configuring next-intl to load JSON message files and using getTranslations for server components and useTranslations for client components to render localized content.

What is the best way to load server-side translations in Next.js?▼

Load server-side translations in Next.js by using the getTranslations function from next-intl, which allows you to fetch locale data within server components without explicitly passing the locale in the call.

How do I structure JSON message files for multiple languages in next-intl?▼

Structure JSON message files for next-intl by creating separate files per language, such as messages/en.json and messages/es.json, and adding translation keys centrally to maintain and apply translations across the app.

Does next-intl support dynamic interpolation for localized strings?▼

Yes, next-intl supports dynamic interpolation for localized strings, allowing you to pass dynamic values into your translations when rendering localized content on the client or server side.

Can I use useTranslations for client-side localization in Next.js?▼

Yes, you can use the useTranslations hook from next-intl to render localized strings on the client side in Next.js, ensuring UI content is localized and easy to maintain.

How do I add a new language to my Next.js app with next-intl?▼

Add a new language to Next.js by creating a new JSON message file, loading it through your next-intl configuration, and rendering localized labels across pages with automatic fallbacks for missing translations.

Related Skills

Explore More Software Engineering Skills→
flavien-iaflavien-ia
34

add-i18n

Configures internationalization for Next.js App Router projects using the next-intl library with SEO-friendly locale routing.

Community
Advanced
xergioalexxergioalex
3

add-page

Generates multilingual pages with shared components and SEO metadata for Astro applications.

Community
Intermediate
ZhanlinCuiZhanlinCui
178

Internationalizing Websites

Automate Next.js internationalization with next-intl routing and SEO localization.

Community
Intermediate
VoTruongDanhVoTruongDanh

i18n-localization

Detect hardcoded strings and manage translation files for i18n.

Community
Intermediate