# 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](https://nextjs.org/) 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](https://next-intl-docs.vercel.app/) - **Shadcn UI**: Pre-configured [shadcn UI](https://ui.shadcn.com/) 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: ```bash git clone https://github.com/S0vers/next-app-i18n-starter.git ``` Install dependencies: ```bash npm install # or yarn # or pnpm install # or bun install ``` Start the development server: ```bash npm run dev # or yarn dev # or pnpm dev # or bun dev ``` Open [http://localhost:3000](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: ```jsx import { Button } from "@/components/ui/button"; export default function Home() { return ; } ``` ## 🔄 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: ```jsx import { OmitRTL } from "@/components/OmitRTL"; function MyComponent() { return (

This text will follow the website's direction.

Logo

This heading and content will always be LTR

Regardless of the website's direction.
); } ``` ### NPM Package If you just need the OmitRTL function, it's also available as an npm package: ```bash npm i react-omit-rtl ``` ```jsx import React from "react"; import OmitRTL from "react-omit-rtl"; function App() { return (

This text will not have RTL direction.

 ); } export default App; ``` ## 🔍 SEO Optimization The template provides comprehensive SEO features with the Next.js 15 Metadata API: ```jsx export async function generateMetadata({ params, }: { params: { locale: string }, }): Promise { 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: ```jsx