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

•

开发者工具

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

关于

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.

主要功能

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

使用场景

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

关于

主要功能

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

使用场景

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