Next.js 16 i18n Starter

Next.js 16 i18n Starter is a production-ready boilerplate for building multilingual Next.js apps, bundling next-intl 4 localization, shadcn/ui components, and a complete locale-aware SEO setup in one template.

What is Next.js 16 i18n Starter?

Next.js 16 i18n Starter is a multilingual boilerplate for the Next.js 16 App Router, built with React 19, next-intl 4, Tailwind CSS 4, and shadcn/ui. It ships with five locales — English, Arabic, Chinese, Spanish, and Japanese — and produces fully localized pages with currency/date formatting, RTL layout, cookie-based theme SSR, and SEO metadata for every locale. It runs on Turbopack in development and deploys to Vercel without extra configuration. Created by Sovers Tonmoy Pandey (S0vers), the template is MIT-licensed and maintained on GitHub.

Key Features

• Framework — Next.js 16 App Router with Server Components, Turbopack dev server, and TypeScript.
• i18n engine — next-intl 4 with ICU message syntax, useFormatter, useNow, and per-request message/timezone/format loading.
• Five languages out of the box — English (default), Arabic (RTL), Chinese, Spanish, and Japanese, with a localePrefix: "as-needed" routing strategy (English at /, others under /ar, /zh, /es, /ja).
• Locale-driven formatting — Currency, dates, compact numbers, and relative time follow the active locale via src/i18n/regional.ts (for example, English uses USD and America/New_York, Japanese uses JPY and Asia/Tokyo).
• shadcn/ui + Tailwind CSS 4 — Prebuilt UI primitives and utility styling, plus a light/dark theme system that reads a cookie server-side to avoid flash-of-unstyled-content without next-themes.
• RTL support — Automatic dir="rtl" on Arabic pages and an OmitRTL utility component (also published on npm as react-omit-rtl) to keep code blocks and logos LTR.
• Complete SEO — Metadata API with metadataBase, per-locale hreflang alternates, JSON-LD WebSite/Person schemas, dynamic sitemap.ts and robots.ts, Open Graph/Twitter cards, and Google Search Console verification.
• DX safeguards — Typed translation keys via global.d.ts (derived from en.json), so a missing key in another locale fails the TypeScript build.

Who is it for?

• Next.js developers — spin up a new App Router project with i18n, theming, and SEO pre-configured instead of wiring them from scratch.
• Agencies and freelancers — deliver client sites in multiple languages with hreflang, sitemap, and JSON-LD already in place.
• Product teams localizing for global markets — ship Arabic RTL, Japanese, or Spanish versions of marketing sites with correct locale-aware pricing and dates.

What can you do with Next.js 16 i18n Starter?

• Launch a multilingual landing page — use the five included locales, language switcher, and home page with hero and tabs to publish a site that works in all languages immediately.
• Build RTL-first experiences — rely on automatic Arabic right-to-left layout and use OmitRTL to keep code snippets and terminal output left-to-right.
• Show regionally correct prices and dates — let the active locale decide currency and timezone (e.g., SAR for Arabic, CNY for Chinese, EUR for Spanish) with no user-configurable dropdowns.
• Add SEO to a new page — follow the documented pattern: create src/app/[locale]/about/page.tsx, add an About namespace to all dictionary files, and extend sitemap.ts with getPathname for locale-aware URLs.

How does i18n routing work?

Routing is defined in src/i18n/routing.ts with defineRouting; the localePrefix: "as-needed" strategy gives the default locale (English) no URL prefix. A src/proxy.ts file runs on every request to detect the locale from the URL, cookie, or Accept-Language header, and all navigations should use wrappers from @/i18n/navigation (localized Link, useRouter, usePathname) rather than next/link directly.

FAQ

Is the template free?

Yes, the template is open source under the MIT license and free to use for personal and commercial projects.

What prerequisites are needed?

Bun 1.x (recommended) or Node.js 24+, plus a basic familiarity with the Next.js App Router and React Server Components.

How do I add a new language?

Copy dictionary/en.json to a new locale file (e.g., fr.json), register the locale in src/i18n/routing.ts, add regional defaults in src/i18n/regional.ts, add a UI label in LanguageSwitcher.tsx, and add an Open Graph locale in src/lib/site.ts. TypeScript will verify keys across all dictionaries on build.

Why is English at / instead of /en?

The template uses localePrefix: "as-needed", so the default locale (English) has no URL prefix. All other locales get a prefix like /ar, /zh, /es, /ja. The getPathname helper from @/i18n/navigation should be used to build URLs so this is handled automatically.

How do I fix the Open Graph image URL?

Set NEXT_PUBLIC_SITE_URL to your production domain. The template uses metadataBase in generateMetadata to resolve the relative /og-image.png path to an absolute URL.