TL;DR
A production-ready Next.js 15 + App Router i18n starter template with server-side translations, instant locale switching, and 15 languages out of the box.
What You Get
- ⚡ Next.js 15 with App Router and Server Components
- 🌍 15 languages pre-configured (EN, TR, DE, ES, FR, JA, KO, ZH, AR, RU, IT, NL, HI, PL, PT)
- 🔄 Instant locale switching — no full page reload
- 🖥️ SSR translations — no flash of untranslated content
- 📦 Cloud-managed translations via better-i18n CDN
- 🎨 Tailwind CSS 4 + shadcn/ui components
- 🔍 SEO-ready — hreflang tags, Open Graph, JSON-LD schemas, sitemap
Quick Start
Step 1: Clone and install
npx create-next-app -e https://github.com/better-i18n/nextjs-i18n-starter my-i18n-app
cd my-i18n-app
Step 2: Create a free project at dash.better-i18n.com, add your languages, and set the env variable:
echo 'NEXT_PUBLIC_BETTER_I18N_PROJECT=your-org/your-project' > .env
Step 3: Run it
npm run dev
# Open http://localhost:3000
Done. You have a multilingual Next.js app.
How It Works
The entire setup is 3 files:
Config (i18n.config.ts)
import { createI18n } from "@better-i18n/next";
export const i18n = createI18n({
project: process.env.NEXT_PUBLIC_BETTER_I18N_PROJECT || "better-i18n/demo",
defaultLocale: "en",
localePrefix: "always",
});
Middleware (middleware.ts)
import { i18n } from "./i18n.config";
export default i18n.betterMiddleware();
Yes, that's it. One line handles locale detection, redirects, and path prefixing.
Layout (src/app/[locale]/layout.tsx)
export default async function LocaleLayout({ children, params }) {
const { locale } = await params;
const messages = await i18n.getMessages(locale);
return (
<html lang={locale}>
<body>
<BetterI18nProvider config={i18n.config} locale={locale} messages={messages}>
{children}
</BetterI18nProvider>
</body>
</html>
);
}
Translations load server-side from CDN → passed to provider → available everywhere via useTranslations().
Customization
Add a new language
Just add it in the better-i18n dashboard. The useManifestLanguages hook in the language switcher picks it up automatically — no code changes needed.
Add a new page
// src/app/[locale]/pricing/page.tsx
import { useTranslations } from "next-intl";
export default function PricingPage() {
const t = useTranslations("pricing");
return <h1>{t("title")}</h1>;
}
Add your translation keys in the dashboard, and the page works in all languages.
Deploy to Vercel
npm run build
# Or push to GitHub and connect to Vercel for automatic deploys
The starter works out of the box on Vercel with zero configuration.
Links
If this is useful, drop a ⭐ on the repo!
SOCIAL SHARE CARD GENERATOR