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.

主な機能

01Dual-pattern support for Server and Client Components

024 GitHub stars

03Standardized JSON schema for multilingual content management

04Locale-aware routing and URL generation utilities

05Tree-shakeable, component-specific translation file structures

06Context-based translation delivery via TranslationContextProvider

ユースケース

01Building multilingual React or Next.js applications with localized routing

02Optimizing client-side bundle sizes by splitting translations per component

03Migrating hardcoded strings to a scalable internationalization framework

What are Skills?·How to Install

Install with 🐟 Skill.Fish

npx skillfish add qingqishi/shiqingqi.com i18n-patterns

For use in Claude.ai and ChatGPT

Download Skill