Build a Multilingual Next.js App in 5 Minutes with App Router

Source: Dev.to

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.

GitHub Repo | Live Demo

Highlights

• ⚡ Next.js 15 with App Router and Server Components
• 🌍 15 pre‑configured languages (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

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: Configure the project

1. Create a free project at .
2. Add the languages you need.
3. Set the environment variable:

echo 'NEXT_PUBLIC_BETTER_I18N_PROJECT=your-org/your-project' > .env

Step 3: Run the development server

npm run dev
# Open http://localhost:3000

You now have a multilingual Next.js app.

Core files

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.ts

import { i18n } from "./i18n.config";

export default i18n.betterMiddleware();

One line handles locale detection, redirects, and path prefixing.

src/app/[locale]/layout.tsx

export default async function LocaleLayout({ children, params }) {
  const { locale } = await params;
  const messages = await i18n.getMessages(locale);

  return (
    
      
        
          {children}
        
      
    
  );
}

Translations load server‑side from the CDN, are passed to the provider, and become available everywhere via useTranslations().

Example page

// src/app/[locale]/pricing/page.tsx
import { useTranslations } from "next-intl";

export default function PricingPage() {
  const t = useTranslations("pricing");
  return 
## {t("title")}
;
}

Add your translation keys in the better‑i18n dashboard; the page works in all languages automatically.

Build & Deploy

npm run build

Push the repository to GitHub and connect it to Vercel for automatic deployments. The starter works out of the box on Vercel with zero configuration.

Resources

• GitHub Repo: https://github.com/better-i18n/nextjs-i18n-starter
• Live Demo: https://demo.better-i18n.com
• Documentation: https://better-i18n.com/docs
• Dashboard: https://dash.better-i18n.com

If you find this useful, please ⭐ the repository!