Implement multi-language support with next-intl including RTL and pluralization for Google Antigravity.
# Next-Intl Localization for Google Antigravity
Implement comprehensive multi-language support with next-intl including pluralization and RTL.
## Configuration
```typescript
// i18n.config.ts
export const locales = ["en", "es", "fr", "de", "ar", "ja"] as const;
export type Locale = (typeof locales)[number];
export const defaultLocale: Locale = "en";
export const localeNames: Record<Locale, string> = { en: "English", es: "Español", fr: "Français", de: "Deutsch", ar: "العربية", ja: "日本語" };
export const rtlLocales: Locale[] = ["ar"];
export function isRTL(locale: Locale): boolean { return rtlLocales.includes(locale); }
```
## Messages
```json
// messages/en.json
{
"common": { "loading": "Loading...", "save": "Save", "cancel": "Cancel" },
"dashboard": {
"welcome": "Welcome back, {name}!",
"projectCount": "{count, plural, =0 {No projects} one {# project} other {# projects}}",
"lastUpdated": "Last updated {date, date, medium}"
}
}
```
## Request Config
```typescript
// i18n/request.ts
import { getRequestConfig } from "next-intl/server";
import { locales, Locale } from "@/i18n.config";
import { notFound } from "next/navigation";
export default getRequestConfig(async ({ locale }) => {
if (!locales.includes(locale as Locale)) notFound();
return { messages: (await import(`../messages/${locale}.json`)).default, timeZone: "UTC" };
});
```
## Middleware
```typescript
// middleware.ts
import createMiddleware from "next-intl/middleware";
import { locales, defaultLocale } from "@/i18n.config";
export default createMiddleware({ locales, defaultLocale, localePrefix: "as-needed" });
export const config = { matcher: ["/((?!api|_next|.*\\..*).*)"] };
```
## Layout with RTL
```typescript
// app/[locale]/layout.tsx
import { NextIntlClientProvider } from "next-intl";
import { getMessages } from "next-intl/server";
import { isRTL, Locale } from "@/i18n.config";
export default async function LocaleLayout({ children, params: { locale } }: { children: React.ReactNode; params: { locale: Locale } }) {
const messages = await getMessages();
return (
<html lang={locale} dir={isRTL(locale) ? "rtl" : "ltr"}>
<body><NextIntlClientProvider messages={messages}>{children}</NextIntlClientProvider></body>
</html>
);
}
```
## Using Translations
```typescript
// components/Dashboard.tsx
"use client";
import { useTranslations, useFormatter } from "next-intl";
export function Dashboard({ user, projectCount }: { user: { name: string }; projectCount: number }) {
const t = useTranslations("dashboard");
const format = useFormatter();
return (
<div>
<h1>{t("welcome", { name: user.name })}</h1>
<p>{t("projectCount", { count: projectCount })}</p>
<p>{t("lastUpdated", { date: new Date() })}</p>
<p>{format.number(12345.67, { style: "currency", currency: "USD" })}</p>
</div>
);
}
```
## Language Switcher
```typescript
// components/LanguageSwitcher.tsx
"use client";
import { useLocale } from "next-intl";
import { useRouter, usePathname } from "next-intl/client";
import { locales, localeNames, Locale } from "@/i18n.config";
import { useState } from "react";
const flags: Record<Locale, string> = { en: "🇺🇸", es: "🇪🇸", fr: "🇫🇷", de: "🇩🇪", ar: "🇸🇦", ja: "🇯🇵" };
export function LanguageSwitcher() {
const locale = useLocale() as Locale;
const router = useRouter();
const pathname = usePathname();
const [open, setOpen] = useState(false);
return (
<div className="lang-switcher">
<button onClick={() => setOpen(!open)}>{flags[locale]} {localeNames[locale]}</button>
{open && (
<ul>
{locales.map((loc) => (
<li key={loc}>
<button onClick={() => { router.replace(pathname, { locale: loc }); setOpen(false); }}>
{flags[loc]} {localeNames[loc]}
</button>
</li>
))}
</ul>
)}
</div>
);
}
```
## Server Component
```typescript
// app/[locale]/page.tsx
import { getTranslations } from "next-intl/server";
export async function generateMetadata({ params: { locale } }: { params: { locale: string } }) {
const t = await getTranslations({ locale, namespace: "meta" });
return { title: t("title"), description: t("description") };
}
export default async function HomePage() {
const t = await getTranslations("home");
return (<main><h1>{t("title")}</h1></main>);
}
```
## RTL CSS
```css
[dir="rtl"] { text-align: right; }
[dir="rtl"] .flex-row { flex-direction: row-reverse; }
.card { padding-inline: 1rem; margin-inline: auto; }
```
## Best Practices
1. **ICU Format**: Use ICU syntax for pluralization
2. **Namespaces**: Organize translations by feature
3. **RTL Support**: Use CSS logical properties
4. **SEO**: Generate localized metadata with hreflang
5. **Fallbacks**: Configure fallback localesThis i18n prompt is ideal for developers working on:
By using this prompt, you can save hours of manual coding and ensure best practices are followed from the start. It's particularly valuable for teams looking to maintain consistency across their i18n implementations.
Yes! All prompts on Antigravity AI Directory are free to use for both personal and commercial projects. No attribution required, though it's always appreciated.
This prompt works excellently with Claude, ChatGPT, Cursor, GitHub Copilot, and other modern AI coding assistants. For best results, use models with large context windows.
You can modify the prompt by adding specific requirements, constraints, or preferences. For i18n projects, consider mentioning your framework version, coding style, and any specific libraries you're using.