Skip to content

Instantly share code, notes, and snippets.

@nixjs

nixjs/i18n.d.ts

Last active March 23, 2025 01:24
Show Gist options
  • Save nixjs/866554e2c92a8eca05712ea69282c21f to your computer and use it in GitHub Desktop.
Save nixjs/866554e2c92a8eca05712ea69282c21f to your computer and use it in GitHub Desktop.
Download ZIP
Use i18n CDN for next app router
Raw
i18n.d.ts
export const locales = ['en', 'vi'] as const;
export interface Messages {
welcome: string;
[key: string]: string | object;
}
declare module 'next-intl' {
interface AppConfig {
Locale: (typeof locales)[number];
Messages: Messages;
}
}
Raw
i18n.ts
import { Messages } from './i18n';
export async function getRequestConfig({ locale }: { locale: string }) {
const response = await fetch(`https://your-cdn-url.com/locales/${locale}/translation.json`);
const messages: Messages = await response.json();
return { messages };
}
Raw
layout.tsx
import { NextIntlClientProvider } from 'next-intl';
import { getRequestConfig } from '../../i18n';
export async function generateStaticParams() {
return [{ locale: 'en' }, { locale: 'vi' }];
}
export default async function RootLayout({
children,
params: { locale },
}: {
children: React.ReactNode;
params: { locale: string };
}) {
const { messages } = await getRequestConfig({ locale });
return (
<html lang={locale}>
<body>
<NextIntlClientProvider locale={locale} messages={messages}>
{children}
</NextIntlClientProvider>
</body>
</html>
);
}
Raw
page.tsx
import { useTranslations } from 'next-intl';
export default function Home() {
const t = useTranslations();
return <h1>{t('welcome')}</h1>;
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment