Nexti8n - Next.js Internationalization Starter

A lightweight, flexible, and easy-to-use internationalization (i18n) starter kit for Next.js applications. This project provides a complete solution for building multilingual websites with Next.js 15+ App Router.

Features

• 🌐 Middleware-based routing: Automatically routes users based on their language preference
• 🔄 Seamless URL localization: Clean URLs with language prefixes (/en/about, /tr/hakkimizda)
• 📝 JSON-based translations: Simple management of translations in JSON files
• 🧩 TypeScript support: Full type safety for your translations
• 🖥️ Server and Client components: Works with both React Server Components and Client Components
• 🔀 Language switcher: Easy-to-implement language switching component
• 🎯 SEO friendly: Proper language tags and metadata for search engines
• 🚀 Zero dependencies: No additional i18n libraries required

Demo

The demo showcases a simple multilingual website with multiple pages and navigation that automatically adjusts based on the selected language.

Getting Started

Installation

# Clone the repository
git clone https://github.com/yourusername/nexti8n.git

# Navigate to the project
cd nexti8n

# Install dependencies
npm install

# Run the development server
npm run dev

Project Structure

/
├── app/                   # Next.js App Router
│   ├── [locale]/          # Dynamic route for localized pages
│   │   ├── about/         # Localized About page
│   │   ├── contact/       # Localized Contact page
│   │   ├── login/         # Localized Login page
│   │   └── ...            # Other localized pages
│   └── layout.tsx         # Root layout
├── context/               # React context for locale management
├── lib/                   # Utility functions
│   └── i18n.ts            # i18n helper functions
├── locales/               # Translation files
│   ├── en.json            # English translations
│   └── tr.json            # Turkish translations
├── middleware.ts          # Next.js middleware for handling localization
└── ...

How It Works

1. Middleware: Handles language detection and routing
2. JSON Files: Store translations for different languages
3. Context API: Manages the current locale
4. Helper Functions: Provide utilities for translation and URL generation

Adding a New Language

1. Create a new JSON file in the locales folder (e.g., fr.json)
2. Add the language code to the locales array in middleware.ts
3. Fill in the translations in your new JSON file

Adding Translations

The translation files follow this structure:

{
  "routes": {
    "home": "",
    "about": "about",
    "contact": "contact",
    "not-found": "404",
    "login": "login",
    "register": "register",
    "forgot-password": "forgot-password",
    "account": {
      "logout": "account/logout",
      "profile": "account/profile"
    }
  },
  "common": {
    "home": "Home",
    "about": "About",
    "contact": "Contact"
  }
}

Usage

Translating Content

// Import the helper function
import { getMessages } from "@/lib/i18n";

// In your component
export default function Page({ params: { locale } }) {
  const messages = getMessages(locale);

  return (
    <div>
      <h1>{messages.common.home}</h1>
    </div>
  );
}

Creating Localized Links

import Link from "next/link";
import { getLocalizedPath } from "@/lib/i18n";

export default function Navigation({ locale }) {
  return (
    <nav>
      <Link href={getLocalizedPath(locale, "about")}>About</Link>
    </nav>
  );
}

Customization

Changing the Default Language

Edit the defaultLocale variable in middleware.ts:

// Default locale
export const defaultLocale = "en";

Customizing Routes

Edit the route definitions in the respective locale files:

// locales/en.json
{
  "routes": {
    "blog": "blog",
    "products": "products"
  }
}

// locales/fr.json
{
  "routes": {
    "blog": "blog",
    "products": "produits"
  }
}

Contributing

Contributions are welcome! Please feel free to submit a Pull Request.

License

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