What languages are supported out of the box?

The current pattern is configured to support English (en) and Chinese (zh) locales.

Does it support both server and client components?

Yes, it uses getTranslations for server components and a useTranslations hook combined with a ContextProvider for client components.

Where should I store translation files?

Server translations go in translations.json files within component or route folders, while client translations use [ComponentName].translations.json for better tree-shaking.

What is the main benefit of this i18n pattern?

It provides a clear separation between server and client translation logic, ensuring optimal performance through tree-shaking and organized JSON files.

How are localized URLs generated?

The skill includes a getLocalePath() utility that automatically prefixes URLs with the correct locale parameter (e.g., /en/ or /zh/).

Internationalization (i18n) Patterns

Name: Internationalization (i18n) Patterns
Author: QingqiShi

byQingqiShi

•

Developer Tools

Implements standardized internationalization patterns for server and client components using specialized hooks and utilities.

About

This skill provides a comprehensive framework for managing multilingual content within a Next.js-style application. It streamlines the implementation of internationalization (i18n) by offering distinct patterns for server-side translation fetching and client-side context-driven hooks. By leveraging structured JSON translation files and locale-aware routing, it ensures high-performance, tree-shakeable components that seamlessly support English and Chinese locales, making it ideal for developers building globally-accessible web applications.

Key Features

Dual-pattern support for Server and Client Components
4 GitHub stars
Standardized JSON schema for multilingual content management
Locale-aware routing and URL generation utilities
Tree-shakeable, component-specific translation file structures
Context-based translation delivery via TranslationContextProvider

Use Cases

Building multilingual React or Next.js applications with localized routing
Optimizing client-side bundle sizes by splitting translations per component
Migrating hardcoded strings to a scalable internationalization framework

About

Key Features

Dual-pattern support for Server and Client Components
4 GitHub stars
Standardized JSON schema for multilingual content management
Locale-aware routing and URL generation utilities
Tree-shakeable, component-specific translation file structures
Context-based translation delivery via TranslationContextProvider

Use Cases

Building multilingual React or Next.js applications with localized routing
Optimizing client-side bundle sizes by splitting translations per component
Migrating hardcoded strings to a scalable internationalization framework