Skip to main content

Add a new language

Step 1: Create a new language file​

To add support for new languages, you first need to create the corresponding translation files. Create a new file in the src/data/locales/[lng]/[translation].json directory. Replace [lng] with the language code and [translation] with the translation json file name.

For example, to add support for the Spanish language, create a new file named es.json in the src/data/locales directory.

Example:​

For Spanish, you would create:

src/data/locales/es/default.json

And then add the translations to the file:

{
  "hello": "Hola"
}

Step 2: Update the language Settings​

Once the language file is created, you need to update the new language to the language array in your settings file located at src/@core/utils/i18n/i18n-settings.ts

export const languages: string[] = ['en', 'fr', 'de', 'es'] // Add 'es' to the array

Now, you need to update the defaultI18nNamespaces array in the same file to include the new language namespace.

export const defaultI18nNamespaces = ['translation', 'default']

Step 3: Update the language dropdown​

Once you have added a new language and its corresponding translation to your Next.js project, the next step is to include it in the language selection dropdown. This allows users to switch between languages.

To do this, update the languageLabels object in the src/components/LanguageDropdown.tsx file:

const languageLabels: { [key: string]: string } = {
  en: 'English',
  fr: 'French',
  de: 'German',
  es: 'Spanish' // Add Spanish to the object
}

Finally! You have successfully added new language support to your Next.js application using i18next. You can now create and manage translations for multiple languages in your application.