Overview
Integrate Next.js (App Router) with next-i18next and load translations from the Synclang CDN. You initialise i18next with the HTTP backend, wire it with next-i18next, and render translations in client components. The CDN serves per-locale JSON so the client stays lean and cache-friendly. This guide targets modern Next.js with TypeScript.
Steps
- Install dependencies
- Add environment variable for the workspace
- Create i18n initialiser with HTTP backend
- Provide the i18n instance to the app
- Translate in components and switch language
File structure
project/
next-i18next.config.js
next.config.js
app/
providers.tsx
layout.tsx
page.tsx
i18n/
i18n.ts
Prepare/Install
Installs next-i18next, i18next, and the HTTP backend.
npm install next-i18next i18next i18next-http-backend
Add environment variable
Defines the Synclang workspace UUID for the CDN loader.
# .env.local
NEXT_PUBLIC_TL_WORKSPACE_UUID=YOUR_WORKSPACE_UUID
Code configuration steps
Configures next-i18next locales and defaults. Keep it minimal; loading is delegated to i18next-http-backend.
// next-i18next.config.js
/** @type {import('next-i18next').UserConfig} */
const config = {
i18n: {
defaultLocale: 'en-GB',
locales: ['en-GB', 'es-ES'],
},
reloadOnPrerender: false,
};
module.exports = config;
Enables internationalised routing in Next.js (optional if already configured).
// next.config.js
const { i18n } = require('./next-i18next.config');
/** @type {import('next').NextConfig} */
const nextConfig = { i18n };
module.exports = nextConfig;
Initialises i18next with the HTTP backend pointing at the Synclang CDN.
// i18n/i18n.ts
'use client';
import i18next from 'i18next';
import HttpBackend from 'i18next-http-backend';
import { initReactI18next } from 'react-i18next';
const WORKSPACE_UUID = process.env.NEXT_PUBLIC_TL_WORKSPACE_UUID as string;
void i18next
.use(HttpBackend)
.use(initReactI18next)
.init({
lng: 'en-GB',
fallbackLng: 'en-GB',
supportedLngs: ['en-GB', 'es-ES'],
interpolation: { escapeValue: false },
backend: { loadPath: `https://cdn.synclang.com/${WORKSPACE_UUID}/json/{{lng}}` },
});
export default i18next;
Provides the i18n instance to client components in the App Router.
// app/providers.tsx
'use client';
import { ReactNode } from 'react';
import { I18nextProvider } from 'react-i18next';
import i18next from '../i18n/i18n';
export default function Providers({ children }: { children: ReactNode }) {
return <I18nextProvider i18n={i18next}>{children}</I18nextProvider>;
}
Registers the provider in the root layout.
// app/layout.tsx
import Providers from './providers';
export default function RootLayout({ children }: { children: React.ReactNode }) {
return (
<html lang="en">
<body>
<Providers>{children}</Providers>
</body>
</html>
);
}
Examples/Usage
Translates a title and provides language switch buttons in a client component.
// app/page.tsx
'use client';
import { useTranslation } from 'react-i18next';
export default function Page() {
const { t, i18n } = useTranslation();
return (
<main>
<h1>{t('welcome.title', { userName: 'Synclang' })}</h1>
<button onClick={() => i18n.changeLanguage('es-ES')}>ES</button>
<button onClick={() => i18n.changeLanguage('en-GB')}>EN</button>
</main>
);
}
Summary
You installed next-i18next and configured i18next to fetch translations from the Synclang CDN. You provided the i18n instance to the App Router using a client-side provider and translated keys in a page component. Runtime language switching was demonstrated. The setup keeps translations externalised and cached as JSON per locale.