Skip to main content

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 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. 🥳🎉