> ## Documentation Index
> Fetch the complete documentation index at: https://docs.shadcnkit.com/llms.txt
> Use this file to discover all available pages before exploring further.

# Internationalization (i18n) in ShadcnKit

> Set up and use multi-language support in your ShadcnKit project

# Internationalization (i18n) in ShadcnKit

ShadcnKit uses `next-intl` for internationalization, allowing you to easily support multiple languages in your application. This guide will walk you through the i18n setup and usage.

## Setup Files

### 1. `middleware.ts`

This file configures the middleware for handling locales:

```typescript
import createMiddleware from 'next-intl/middleware';
import {locales} from './config';

export default createMiddleware({
  locales,
  defaultLocale: 'en'
});

export const config = {
  matcher: ['/', '/(ar|en|fr)/:path*']
};
```

This middleware:

* Defines supported locales
* Sets the default locale to English
* Configures URL patterns for locale-specific routes

### 2. `i18n.ts`

This file sets up the i18n configuration:

```typescript
import {notFound} from 'next/navigation';
import {getRequestConfig} from 'next-intl/server';
import {locales} from './config';

export default getRequestConfig(async ({locale}) => {
  if (!locales.includes(locale as any)) notFound();
  return {
    messages: (await import(`./messages/${locale}.json`)).default
  };
});
```

This configuration:

* Checks if the requested locale is supported
* Loads the appropriate translation messages

## Translation Files

Translations are stored in JSON files under the `messages` directory:

* `messages/en.json` (English)
* `messages/ar.json` (Arabic)
* `messages/fr.json` (French)

Example structure of a translation file:

```json
{
  "Feedback": {
    "title": "Feedback",
    "description": "We value your input!",
    "notAuthenticated": "Please sign in to submit feedback."
    // ... more translations
  }
}
```

## Using Translations

### 1. Creating Translation Interfaces

For type safety and easier management, create interfaces for your translations. For example, `app/translations/FeedbackTranslations.ts`:

```typescript
import { getTranslations } from 'next-intl/server';

export interface FeedbackTranslations {
  title: string;
  description: string;
  // ... other translation keys
}

export async function getFeedbackTranslations(): Promise<FeedbackTranslations> {
  const t = await getTranslations('Feedback');
  return {
    title: t('title'),
    description: t('description'),
    // ... other translations
  };
}
```

### 2. Using Translations in Components

In your components or pages, use the translations like this:

```tsx
import { useTranslations } from 'next-intl';

export default function FeedbackComponent() {
  const t = useTranslations('Feedback');

  return (
    <div>
      <h1>{t('title')}</h1>
      <p>{t('description')}</p>
      {/* ... other translated content */}
    </div>
  );
}
```

## Managing Languages

1. **Adding a New Language**:
   * Create a new JSON file in the `messages` directory (e.g., `messages/es.json` for Spanish)
   * Add the new locale to the `locales` array in your config file
   * Update the `matcher` in `middleware.ts` to include the new locale

2. **Switching Languages**:
   * ShadcnKit typically includes a language switcher component
   * This component updates the URL to include the selected locale (e.g., `/en/dashboard`, `/fr/dashboard`)

3. **Best Practices**:
   * Keep translation keys consistent across all language files
   * Use nested structures in your JSON files for better organization

## Benefits of i18n in ShadcnKit

* **Scalability**: Easily add new languages as your user base grows
* **Maintainability**: Centralized translation files make updates easier
* **User Experience**: Provide a localized experience for international users
* **SEO**: Improved search engine visibility for different language markets

By following this guide, you can effectively manage and use translations in your ShadcnKit project, making your application accessible to a global audience.