​
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.