zoonk-translations

Name: zoonk-translations
Availability: InStock
Author: Zoonk

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

Ready to run

npx skills add https://github.com/zoonk/zoonk --skill zoonk-translations

💬 Prompt for ChatGPT / Claude Chat▼

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.