Setup and context
Internationalization (i18n) is a non-negotiable requirement for any app targeting a global audience. Managing translation files, implementing locale switching, handling date and number formatting — the list of tasks grows quickly. With Antigravity's AI agents, you can automate a significant portion of this i18n workflow and ship high-quality multi-language apps faster than ever.
Setting Up an i18n Project
When starting a multi-language project in Antigravity, the key is to communicate your project's structure clearly to the AI agent from the very beginning.
Installing next-intl
In Antigravity's chat panel, you can type a prompt like this:
Add next-intl to this Next.js project.
Support Japanese (ja) and English (en), with ja as the default locale.
Use the App Router [locale] pattern.Antigravity's agent will automatically handle the following tasks:
- Installing the
next-intlpackage - Creating
src/i18n/routing.tswith locale definitions and routing config - Creating
src/i18n/request.tsfor per-request locale resolution - Creating
middleware.tsfor automatic locale prefix handling - Generating the
src/app/[locale]/layout.tsxboilerplate
Directory Structure
Here's the typical i18n project structure that Antigravity generates:
src/
├── i18n/
│ ├── routing.ts # Locale definitions
│ └── request.ts # Request config
├── messages/
│ ├── ja.json # Japanese messages
│ └── en.json # English messages
├── app/
│ └── [locale]/
│ ├── layout.tsx
│ └── page.tsx
└── middleware.ts
Automated Translation File Generation
The most tedious part of i18n is managing translation files. Antigravity can extract translation keys from your source code and generate translation files automatically.
Generating English from Japanese
Start by creating your Japanese message file:
{
"navigation": {
"home": "ホーム",
"about": "About Us",
"contact": "Contact",
"pricing": "Pricing"
},
"hero": {
"title": "Smarter Development, Powered by AI",
"subtitle": "Antigravity accelerates your coding workflow",
"cta": "Get Started Free"
},
"features": {
"heading": "Key Features",
"ai_completion": "AI Code Completion",
"ai_completion_desc": "Context-aware code completions that dramatically reduce keystrokes",
"multi_agent": "Multi-Agent System",
"multi_agent_desc": "Multiple AI agents work in concert to handle complex tasks automatically"
}
}Then ask Antigravity to generate the counterpart:
Based on messages/ja.json, generate messages/en.json with natural English.
Don't translate literally — write copy that feels native to English speakers.
Maintain the marketing tone of the original.Antigravity's agent understands the context behind your translations. Unlike simple machine translation, it preserves the nuance of CTAs and brand messaging while adapting them for the target audience.
i18n Implementation Patterns in Components
Using the useTranslations Hook
"use client";
import { useTranslations } from "next-intl";
export function HeroSection() {
const t = useTranslations("hero");
return (
<section className="hero">
<h1>{t("title")}</h1>
<p>{t("subtitle")}</p>
<button>{t("cta")}</button>
</section>
);
}When generating components in Antigravity, using the following prompt ensures i18n-ready code from the start:
Create a HeroSection component.
All text must come from next-intl's useTranslations hook —
no hardcoded strings.
Place translation keys under the hero namespace.Dynamic Value Interpolation
For messages with dynamic values, use ICU message format:
{
"greeting": "Hello, {name}",
"items_count": "{count, plural, =0 {No items} one {# item} other {# items}}"
}const t = useTranslations();
// → "Hello, Alex"
t("greeting", { name: "Alex" });
// → "3 items"
t("items_count", { count: 3 });Locale-Aware Date and Number Formatting
Integrating with the Intl API
When you tell Antigravity to "make dates and currency locale-aware," it generates utility hooks like this:
import { useLocale } from "next-intl";
export function useFormatters() {
const locale = useLocale();
const formatDate = (date: Date) =>
new Intl.DateTimeFormat(locale, {
year: "numeric",
month: "long",
day: "numeric",
}).format(date);
const formatCurrency = (amount: number, currency: string) =>
new Intl.NumberFormat(locale, {
style: "currency",
currency,
}).format(amount);
return { formatDate, formatCurrency };
}In the Japanese locale, you'd see 2026年3月21日 and ¥1,500. Switch to English, and it becomes March 21, 2026 and $15.00 — all handled automatically.
Bulk Translation Update Workflow
As your project grows, keeping translation files in sync becomes a challenge. Here's an efficient batch-update workflow using Antigravity.
Step 1: Detect Missing Keys
Compare messages/ja.json and messages/en.json.
List any keys that exist in ja.json but not in en.json,
and vice versa.Step 2: Auto-Translate Missing Keys
For the untranslated keys listed above,
generate natural English translations based on ja.json values
and add them to en.json.
Don't modify existing keys.Step 3: Translation Quality Review
You can also ask Antigravity's agent to review translation quality:
Review the translations in en.json and check for:
- Unnatural English phrasing
- Inconsistent brand tone
- Length appropriateness for UI context (e.g., button labels that are too long)
Suggest fixes for any issues found.Multi-Language SEO Metadata
For multi-language sites, setting locale-specific metadata is critical for SEO performance.
i18n in generateMetadata
import { getTranslations } from "next-intl/server";
export async function generateMetadata({
params: { locale },
}: {
params: { locale: string };
}) {
const t = await getTranslations({ locale, namespace: "metadata" });
return {
title: t("title"),
description: t("description"),
alternates: {
canonical: `https://example.com/${locale}`,
languages: {
ja: "https://example.com/ja",
en: "https://example.com/en",
},
},
openGraph: {
title: t("title"),
description: t("description"),
locale: locale === "ja" ? "ja_JP" : "en_US",
},
};
}Automated hreflang Tags
Tell Antigravity to "create middleware that auto-generates hreflang tags," and it will set up the configuration so search engines correctly identify each language version of your pages.
Practical Tips
Translation Key Naming Conventions
To ensure Antigravity generates consistent translation keys, register your naming conventions in the project's Knowledge Items:
Translation key naming rules:
- Use page.section.element format
e.g., home.hero.title, about.team.heading
- Prefix button text with action_
e.g., action_submit, action_cancel
- Prefix error messages with error_
e.g., error_required, error_invalid_email
Expanding Beyond Two Languages
Adding a new language is straightforward — Antigravity generates a new locale file from your base translations:
Based on messages/ja.json, generate a Korean (ko) translation file.
Write in natural Korean that feels native to Korean readers.
Match the formality level of the Japanese source.RTL Language Support
For right-to-left languages like Arabic or Hebrew, you can instruct Antigravity to handle layout mirroring as well:
Add Arabic (ar) support to the project.
Include RTL layout support with automatic dir attribute switching
and convert CSS properties to logical properties.Wrapping Up
Antigravity's AI agents let you automate the most time-consuming parts of i18n — from generating and syncing translation files to building i18n-ready components and optimizing multi-language SEO metadata.
The standout advantage is that Antigravity goes beyond simple machine translation. It understands context, tone, and intent, producing translations that feel genuinely native. If you're building for a global audience, incorporating Antigravity into your i18n workflow is one of the most impactful productivity wins you can make.