Adding i18n to the Starter-Kit

note

Our template supports Right-to-Left (RTL) languages like Arabic and Left-to-Right (LTR) languages like English. By adding i18n, you enable the template to automatically switch between RTL and LTR layouts based on the selected language.

• Add the following dependency to your project:

  Begin by installing packages related to i18n, which handle locale matching and negotiation.

  • @formatjs/intl-localematcher
  • @types/negotiator
  • negotiator

  Use the following command to add these dependencies:

  pnpm

  pnpm install @formatjs/intl-localematcher @types/negotiator negotiator

  yarn

  yarn add @formatjs/intl-localematcher @types/negotiator negotiator

  npm

  npm install @formatjs/intl-localematcher @types/negotiator negotiator

• In src/app, create a folder named [lang]. Move all content from src/app to src/app/[lang], excluding src/app/api, favicon, and global.css. Update path references in the moved files.

• Add the following files from the full-version to your project:

  • src/configs/i18n.ts
  • src/utils/i18n.ts
  • src/hocs/TranslationWrapper.tsx
  • src/components/LangRedirect.tsx

• In src/data, create a dictionaries folder and create a json file for each language in the dictionaries folder. For example, en.json, fr.json, and ar.json.

• For example in en.json file add the following code:

  {
    "navigation": {
      "home": "Home",
      "about": "About"
    }
  }

  Similarly, you can add the dictionary for other languages as well.

• Add the src/utils/getDictionary.ts file from the full-version to your project. Make sure to update the languages as per your requirement.

• Go to the src/app/[lang]/layout.tsx file and make the following changes.

  1. Update the following code

     + import { i18n } from '@/configs/i18n'
     + import { headers } from 'next/headers'
     + import type { Locale } from '@/configs/i18n'
     
     - { children }: ChildrenType
     + { children, params }: ChildrenType & { params: { lang: Locale} }
     
     - const direction = 'ltr'
     + const direction = i18n.langDirection[params.lang]  
     + const headersList = headers()
     
     - lang='en'
     + lang={params.lang}

     Make the above changes in the files where you want to use direction

     Wrap the html tag with the <TranslationWrapper headersList={headersList} lang={params.lang}> component.

• Go to the src/app/[lang]/(dashboard)/layout.tsx file and make the following changes.

  1. Add the only direction changes as we did in the src/app/[lang]/layout.tsx file.

  2. Additionally, add the following statement:

     + import { getDictionary } from '@/utils/getDictionary'
     
     + const dictionary = await getDictionary(params.lang)

  3. Add the dictionary={dictionary} prop to the <Navigation /> and <Header /> components.

• Go to the src/components/layout/vertical/Navigation.tsx file and make the following changes.

  1. Add the following in props and get the dictionary from props.

     // If you have used props
     + import type { getDictionary } from '@/utils/getDictionary'
     
     type Props = {
       ...
     + dictionary: Awaited<ReturnType<typeof getDictionary>>
     }
     
     // get the dictionary from props
     + const { dictionary } = props // get the dictionary from destructuring props

     or

     + import type { getDictionary } from '@/utils/get-dictionary'
     
     // Direct passing the parameter
     + { dictionary }: { dictionary: Awaited<ReturnType<typeof getDictionary>> }

     You have to make the changes mentioned above in the following files as well:

     • src/components/layout/vertical/VerticalMenu.tsx

     • src/components/layout/horizontal/Header.tsx

     • src/components/layout/horizontal/Navigation.tsx

     • src/components/layout/horizontal/HorizontalMenu.tsx

• pass the dictionary={dictionary} prop to the in the following files:

  • src/components/layout/vertical/Navigation.tsx file in the <VerticalMenu> component.

  • src/components/layout/horizontal/Navigation.tsx file in the <HorizontalMenu> component.

  • src/components/layout/horizontal/Header.tsx file in the <Navigation> component.

• Make the following changes in src/components/layout/vertical/VerticalMenu.tsx and src/components/layout/horizontal/HorizontalMenu.tsx files.

  1. Add the following code:

       // Next Imports
     + import { useParams } from 'next/navigation'
     
       // Hooks
     + const params = useParams()
     + const { lang: locale } = params

  2. Replace the following statement:

     -  <MenuItem href='/home' icon={<i className='tabler-smart-home' />}>
     -    Home
     -  </MenuItem>
     -  <MenuItem href='/about' icon={<i className='tabler-info-circle' />}>
     -    About
     -  </MenuItem>
     
     +  <MenuItem href={`/${locale}/home`} icon={<i className='tabler-smart-home' />}>
     +    {dictionary['navigation'].home}
     +  </MenuItem>
     +  <MenuItem href={`/${locale}/about`} icon={<i className='tabler-info-circle' />}>
     +    {dictionary['navigation'].about}
     +  </MenuItem>

• If you want to add a language dropdown in your project, then you may copy the LanguageDropdown.tsx file from the full-version of the template and modify as per your requirement. The file is located at src/components/layout/shared/LanguageDropdown.tsx.

• You need to import this component in the src/components/layout/vertical/NavbarContent.tsx and src/components/layout/horizontal/NavbarContent.tsx files and add above the UserDropdown component.

• Copy the redirects from the next.config.mjs file from the full-version of the template to your project's next.config.mjs file and remove the front-pages from the source. Also update the destination path as per your requirement.

After completing these steps, if you encounter any type errors, try refreshing/reopening your editor or deleting the .next folder before running your project again.

Congratulations! You've successfully added i18n to your Next.js project. 🥳🎉