​

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:

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:

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:

{
  "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:

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:

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.