Next.js 15 Template with i18n and Shadcn UI

Created: …

Next.js

TypeScript

next-intl

shadcn/ui

Tailwind CSS

Next.js 15 starter with Server Components, middleware i18n (next-intl), shadcn/ui, light/dark themes, language switch, and RTL helpers.

View Code Live Demo

Next.js 15 Template with i18n and Shadcn UI

About This Project

A production-ready template: App Router, next-intl with middleware routing, five locales, OmitRTL for mixed-direction layouts, and SEO-oriented metadata patterns.

Overview

Open-source Next.js 15 template with Server Components, locale routing via next-intl middleware, shadcn/ui, and RTL support (Arabic) plus OmitRTL for LTR islands. Theme switching and SEO metadata patterns across five languages.

Project Details

Next App i18n Starter is a modern, SEO-optimized starter template built with Next.js 15, featuring:

App Router

React Server Components

Middleware-based internationalization

Shadcn UI integration

Theme switching

SEO optimization

RTL support

Dynamic metadata generation

The project is designed to help developers quickly build multilingual applications with a production-ready architecture instead of spending time configuring i18n, SEO, routing, and metadata handling from scratch.

Unlike many boilerplates that focus mostly on visual design, this template focuses heavily on the actual infrastructure required for scalable multilingual applications.

GitHub Repository: https://github.com/S0vers/next-app-i18n-starter

Live Demo: https://next-app-i18n-starter.vercel.app

What This Project Solves

Building multilingual applications in Next.js usually requires combining multiple systems manually:

Locale routing

Translation management

SEO metadata

hreflang tags

OpenGraph support

RTL handling

Dynamic sitemap generation

robots.txt configuration

Middleware handling

This project combines all of those into a single production-ready starter architecture.

The template is especially useful for:

SaaS applications

Marketing websites

Enterprise dashboards

International products

SEO-focused multilingual websites

Core Features

⚡ Next.js 15 + App Router

The project is built on Next.js 15 using the App Router and React Server Components.

This enables:

Better performance

Reduced client-side JavaScript

Streaming support

Nested layouts

Improved SEO handling

Server-first rendering

🌍 Internationalization with next-intl

The template uses middleware-based internationalization powered by next-intl.

Language files are stored inside the dictionary/ directory:

├── dictionary
│   ├── ar.json
│   ├── en.json
│   ├── es.json
│   ├── ja.json
│   └── zh.json

Currently supported languages:

English ( en )

Arabic ( ar )

Chinese ( zh )

Spanish ( es )

Japanese ( ja )

Arabic includes full RTL support.

🌍 Localized App Router Architecture

The project uses dynamic locale segments directly inside the App Router.

src/app/[locale]/

This enables route-level localization such as:

/en/about
/ar/about
/ja/about

Unlike traditional client-only approaches, routes themselves become localized and SEO-friendly.

Internationalization System

The project uses next-intl with middleware-driven routing.

Routing Configuration

The project uses dynamic locale segments directly in the App Router:

src/app/[locale]/

This enables localized routes such as:

/en/about
/ar/about
/ja/contact

The middleware handles:

Automatic locale detection

Locale-aware routing

Default locale fallback

Navigation consistency

Server-side translation loading

Middleware-Based Locale Detection

The project uses middleware-based locale handling for clean internationalized routing.

Middleware Example

export default createMiddleware(routing);

This approach allows:

Automatic language detection

Locale-aware redirects

SEO-friendly URL structures

Consistent route handling

Centralized i18n management

Translation Architecture

Translations are organized using dictionary-based JSON structures.

Translation File Example

{
  "navigation": {
    "home": "Home",
    "about": "About",
    "contact": "Contact"
  }
}

Translation Usage

const t = useTranslations("navigation");
return <h1>{t("home")}</h1>;

This architecture keeps translations modular and scalable as applications grow.

RTL (Right-to-Left) Support

RTL support is one of the major focuses of the project.

Many i18n starters ignore proper RTL architecture, but this project includes:

Dynamic document direction

RTL-aware layouts

Logical spacing support

Mixed-direction compatibility

Route-aware direction switching

RTL Example

<html dir={locale === "ar" ? "rtl" : "ltr"}>

OmitRTL Utility

One of the unique parts of the project is the built-in OmitRTL utility.

This utility allows specific components to remain LTR even when the website is rendered in RTL mode.

This is useful for:

Logos

Code blocks

Analytics charts

Technical interfaces

Embedded widgets

Example Usage

import { OmitRTL } from "@/components/OmitRTL";
function MyComponent() {
  return (
    <div>
      <p>This text follows the website direction.</p>
      <OmitRTL omitRTL={true}>
        <div>
          <h2>This content always remains LTR</h2>
        </div>
      </OmitRTL>
    </div>
  );
}

The utility is also available as a standalone npm package:

npm i react-omit-rtl

import OmitRTL from "react-omit-rtl";

Route-Safe Navigation

The project includes locale-aware navigation patterns.

Example Navigation

<Link href="/about">
  About
</Link>

The routing system automatically preserves locale context.

This avoids common issues where users accidentally lose language state during navigation.

SEO Optimization

One of the biggest focuses of the project is multilingual SEO.

The template includes a full SEO setup using the Next.js 15 Metadata API.

Metadata Features Included

Dynamic metadata generation

Locale-specific metadata

OpenGraph tags

Twitter cards

Canonical URLs

Hreflang tags

robots directives

Google site verification

Structured data

Dynamic sitemap generation

Full Metadata Example

export async function generateMetadata({
  params,
}: {
  params: { locale: string },
}): Promise<Metadata> {
  const { locale } = await params;
  const t = await getTranslations({ locale, namespace: "Metadata" });
  return {
    title: t("title"),
    description: t("description"),
    keywords: t("keywords"),
    openGraph: {
      title: t("title"),
      description: t("description"),
      locale: locale,
    },
  };
}

Structured Data Example

<script
  {...(jsonLdScriptProps <
    WebSite >
    {
      "@context": "https://schema.org",
      "@type": "WebSite",
      name: t("title"),
      inLanguage: locale,
    })}
/>

Dynamic Sitemap Example

export default async function sitemap() {
  return locales.map((locale) => ({
    url: `${DOMAIN}/${locale}`,
  }));
}

These SEO features make the project production-ready for multilingual websites and international search indexing.

A major focus of the project is multilingual SEO.

Included SEO Features

hreflang support

Localized metadata

Dynamic sitemap generation

Canonical URLs

Open Graph metadata

Route-based SEO handling

Metadata Example

export async function generateMetadata() {
  return {
    title: "Next App i18n Starter",
    description: "Production-ready multilingual architecture",
  };
}

This makes the starter suitable for real production applications and international websites.

Folder Structure

The project architecture was designed to keep localization isolated and scalable.

src/
├── app/
│   ├── [locale]/
│   │   ├── layout.tsx
│   │   ├── page.tsx
│   │   └── about/
│   │       └── page.tsx
│
├── i18n/
│   ├── messages/
│   ├── routing.ts
│   └── request.ts
│
├── components/
├── lib/
└── middleware.ts

This separation keeps the i18n layer maintainable for larger applications.

Why This Project Matters

Many Next.js internationalization tutorials stop at simple translation examples.

This project focuses on how multilingual systems actually work in production:

Locale-aware routing

Middleware architecture

RTL support

SEO optimization

Translation scaling

App Router integration

Server component compatibility

It acts as both:

A production-ready starter

A learning resource for advanced i18n architecture in Next.js

Open Source

This project is fully open source and available for developers to explore, modify, and contribute to.

GitHub Repository: https://github.com/S0vers/next-app-i18n-starter

If you are building multilingual applications using Next.js, this project can serve as a strong architectural foundation.

Final Thoughts

Next App i18n Starter is more than a simple multilingual demo.

It is a production-oriented architecture template for building modern internationalized applications using:

Next.js 15

App Router

React Server Components

next-intl

Metadata API

Structured data

Middleware-based localization

Dynamic SEO handling

RTL support

The project combines internationalization, SEO, routing, metadata management, and UI infrastructure into a single scalable starter.

For developers building multilingual SaaS platforms, international products, or SEO-focused websites, this template provides a strong foundation with modern Next.js best practices already implemented.

Key Features

Server Components & App Router

Middleware i18n (next-intl)

Five locales (en, ar, zh, es, ja)

RTL layouts + OmitRTL utility

Light/dark theme toggle

Repo layout and docs oriented for fast onboarding and customization

Screenshots

Next.js 15 Template with i18n and Shadcn UI screenshot 1

Technologies Used

Next.js

TypeScript

next-intl

shadcn/ui

Tailwind CSS