Next.js 15 Template with i18n and Shadcn UI

A modern, SEO-optimized template for Next.js 15 applications featuring server components, internationalization support, shadcn UI components, and theme switching capabilities. Perfect for building performant, accessible, and multilingual web applications.

✨ Features

• Next.js 15: Built on the latest Next.js 15 React framework with App Router and Server Components for optimal performance
• SEO Optimization: Includes metadata API, structured data, and optimized page loading strategies
• Internationalization: Full i18n support using middleware-based routing with next-intl
• Shadcn UI: Pre-configured shadcn UI components using the new React Server Components pattern
• Theme System: CSS Variables-based theme system with light/dark mode toggle and system preference detection
• Language Switching: Seamless switching between languages (including RTL support for Arabic and other RTL languages)
• OmitRTL Utility: Helper component to control elements that should maintain LTR (left-to-right) rendering in RTL contexts
• TypeScript: Type-safe codebase with TypeScript configuration optimized for Next.js 15
• Metadata API: Built-in SEO metadata management using Next.js 15's metadata API

🚀 Getting Started

Clone the repository:

git clone https://github.com/S0vers/next-app-i18n-starter.git

Install dependencies:

npm install
# or
yarn
# or
pnpm install
# or
bun install

Start the development server:

npm run dev
# or
yarn dev
# or
pnpm dev
# or
bun dev

Open http://localhost:3000 in your browser to see the result.

📋 Project Structure

The project follows Next.js 15's recommended App Router structure with additions for internationalization:

├── .next                                 # Next.js build output
├── dictionary                            # i18n translation files
│   ├── ar.json                           # Arabic translations
│   └── en.json                           # English translations
├── node_modules                          # Dependencies
├── public                                # Static assets
├── src                                   # Source code
│   ├── app                               # Next.js App Router
│   │   ├── [locale]                      # Dynamic locale routing
│   │   │   ├── page.tsx                  # Home page
│   │   │   ├── error.tsx                 # Error handling
│   │   │   ├── favicon.ico               # Favicon
│   │   │   ├── globals.css               # Global styles
│   │   │   ├── robots.txt                # SEO robots file
│   │   │   └── sitemap.ts                # Dynamic sitemap generation
│   │   └── components                    # Application components
│   │       ├── ui                        # shadcn UI components
│   │       ├── LanguageSwitcher.tsx      # Language toggle component
│   │       ├── ModeToggle.tsx            # Theme toggle component
│   │       ├── OmitRTL.tsx               # RTL handling utility
│   │       └── theme-provider.tsx        # Theme context provider
│   ├── i18n                              # Internationalization utilities
│   │   ├── navigation.ts                 # Localized navigation helpers
│   │   ├── requests.ts                   # i18n-aware API request helpers
│   │   └── routing.ts                    # Locale routing utilities
│   ├── lib                               # Utility functions and shared code
│   │   └── middleware.ts                 # i18n middleware for route handling
│   └── components.json                   # shadcn UI component configuration
├── .eslintrc.json                        # ESLint configuration
├── global.d.ts                           # Global TypeScript declarations
├── LICENSE                               # Project license
├── next-env.d.ts                         # Next.js TypeScript declarations
├── next.config.js                        # Next.js configuration
├── package.json                          # Project dependencies and scripts
├── bun.lock                              # Bun lock file
├── postcss.config.js                     # PostCSS configuration
├── README.md                             # Project documentation
└── tsconfig.json                         # TypeScript configuration

🌐 Internationalization

This template uses middleware-based i18n routing with Next.js 15. Language files are stored in the dictionary/ directory.

Adding a New Language

1. Create a new JSON file in the dictionary/ directory (e.g., fr.json)
2. Add the language to the supported locales in middleware.ts and lib/i18n.ts
3. Add language option to the LanguageSwitcher component

🎨 Shadcn UI Components

Shadcn UI components are configured to work with Next.js 15 Server Components. Import them from the components/ui/ directory:

import { Button } from "@/components/ui/button";

export default function Home() {
  return <Button>Click me</Button>;
}

🔄 OmitRTL Utility

The OmitRTL utility helps you control which elements should maintain LTR direction even when the site is in RTL mode.

How to use the function:

import { OmitRTL } from "@/components/OmitRTL";

function MyComponent() {
  return (
    <div>
      <p>This text will follow the website's direction.</p>
      <OmitRTL omitRTL={true}>
        <img src="/logo.png" alt="Logo" />
        <div>
          <h2>This heading and content will always be LTR</h2>
          <p>Regardless of the website's direction.</p>
        </div>
      </OmitRTL>
    </div>
  );
}

NPM Package

If you just need the OmitRTL function, it's also available as an npm package:

npm i react-omit-rtl

import React from "react";
import OmitRTL from "react-omit-rtl";

function App() {
  return (
    <OmitRTL omitRTL={true}>
      <p>This text will not have RTL direction.</p>
    </OmitRTL>
  );
}
export default App;

🔍 SEO Optimization

The template provides comprehensive SEO features with the Next.js 15 Metadata API:

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"),
    other: {
      "google-site-verification": "********",
    },
    openGraph: {
      title: t("title"),
      description: t("description"),
      url: `next-app-i18n-starter.vercel.app`,
      siteName: "Next.js i18n Template",
      images: [
        {
          url: "next-app-i18n-starter.vercel.app/og-image.png",
          width: 1200,
          height: 630,
        },
      ],
      locale: locale,
      type: "website",
    },
    twitter: {
      card: "summary_large_image",
      title: t("title"),
      description: t("description"),
      images: ["next-app-i18n-starter.vercel.app/og-image.png"],
    },
    alternates: {
      canonical: `next-app-i18n-starter.vercel.app`,
      languages: {
        en: "next-app-i18n-starter.vercel.app",
        ar: "next-app-i18n-starter.vercel.app",
      },
    },
    robots: {
      index: true,
      follow: true,
      googleBot: {
        index: true,
        follow: true,
        "max-video-preview": -1,
        "max-image-preview": "large",
        "max-snippet": -1,
      },
    },
  };
}

Additionally, structured data is implemented using react-schemaorg for better search engine understanding:

<script
  {...(jsonLdScriptProps <
    WebSite >
    {
      "@context": "https://schema.org",
      "@type": "WebSite",
      name: "Next.js i18n Template",
      description:
        "A humble Next 15 starter with i18n, shadcn UI, light/dark themes, and language switch.",
      url: "next-app-i18n-starter.vercel.app",
    })}
/>

Other SEO features included in the template:

• Canonical URLs to prevent duplicate content issues
• Language-specific metadata with translations
• Proper HTML lang attribute based on current locale
• Dynamic sitemap generation
• Robots.txt configuration
• Google site verification
• Optimized OpenGraph and Twitter card images

These features work together to help search engines better understand, index, and display your content to potential visitors across different languages and regions.

🤝 Contributing

We welcome contributions to improve this template! Here's how you can help:

1. Fork the repository
2. Create a new branch (git checkout -b feature/your-feature)
3. Commit your changes (git commit -am 'Add some feature')
4. Push to the branch (git push origin feature/your-feature)
5. Create a new Pull Request

📄 License

This project is licensed under the MIT License - see the LICENSE file for details.