Building an auto t-function wrapping script to easily offload i18n work on existing services

Ahead of a global service launch, to quickly apply i18n to existing React/Next.js code, an automation script based on Babel AST was built.

First, three language resource key conventions were reviewed, and the Korean key approach was finally chosen, prioritizing development speed and team productivity. The biggest reason was that it was intuitive and could be applied quickly, but the limitations were also noted: keys need to be modified along with text changes, and there are duplicate management issues.

The core is split into two tools.

• T Wrapper: finds Korean text in existing code and automatically wraps it with t(...).
• Extractor: collects Korean text targeted for translation across the entire codebase to generate language resource JSON files.

T Wrapper operates using @babel/parser, @babel/traverse, and @babel/generator. First, among FunctionLike nodes, only targets that have JSX or look like custom hooks are selected for processing, and implicit returns of arrow functions are converted into block statements with explicit return so that hooks can be inserted.

Then it traverses string literals, JSXText, conditional expressions, and template literals, wrapping Korean text with t. For template literals, dynamic values are also passed as the second argument for interpolation, while attribute names are kept exactly as used in the code.

useTranslation was restricted to be inserted only in top-level functions, and imports were added only when t was actually used. On top of this, i18n-automation.config.yaml was introduced to allow runOn, targetPaths, and ignorePaths to be adjusted per project. This made it possible to automatically match and import react-i18next for React and next-i18next for Next.js.

Extractor covers a broader scope, scanning StringLiteral, JSXText, JSXAttribute, and TemplateLiteral across the entire project. It collects Korean text not only inside components but also within constants and variables, generating JSON for each language folder, and keeps the Korean keys and values identical to serve as a baseline for subsequent translation work.