Internationalisation

Overview

The Next.js Supabase SaaS template includes built-in support for managing translations, allowing you to offer your application in multiple languages. This section explains how to add, manage, and update translations for different languages in the template.

Default Language Configuration

• English is provided as the default language.
• You can find the default English translation files at:

  /public/locales/en

Steps to Add a New Language

1. Create a new language folder:

   • Navigate to the /public/locales/ directory.
   • Create a new folder for the language you wish to add, using the appropriate language code as the folder name (e.g., de for German, it for Italian, es for Spanish, ja for Japanese).
   • Example:

     /public/locales/de

2. Provide translations:

   • Within the new language folder, create translation files that replicate the structure and keys found in the English (/en) folder.
   • Ensure all keys used in the template are translated for the new language.

Example of Language Folder Structure

If you're adding German translations:

/public/locales/de/common.json
/public/locales/de/auth.json

Updating the Default Language

• To change the default language of your application, update the defaultLocale setting in the client.config.ts file.
  • Example:

    export const defaultLocale = 'de';

Language Visibility in UI

• Once new languages are added, they will automatically appear in the template's UI, typically in the top navigation bar.
• Users can switch between available languages, and the text will be translated accordingly based on the selected language.

Disabling the Language Switcher

• If you prefer not to display the language switcher in the UI, you can disable it by setting the enableLanguageSwitcher flag to false in the client.config.ts file.

export const featuresFlag = {
  enableLanguageSwitcher: false,
}