Skip to main content

Removing i18n from the Template

This guide provides steps to remove i18n (internationalization) from your project.

tip

We recommend you to start your project with starter-kit version if you don't need i18n feature. If you are using full-version and you want to remove i18n feature, then this docs is for you.

warning

Please be aware that our template supports Right-to-Left (RTL) languages like Arabic based on the language settings, automatically applying RTL formatting when an RTL language is selected. For languages like English, it uses Left-to-Right (LTR) formatting.

If you remove the internationalization (i18n) feature, this automatic RTL support will be disabled, and the template will not switch between RTL and LTR layouts based on the language.

Step 1: Uninstall i18n Packages​

First, uninstall the packages associated with i18n. These packages handle language matching and format negotiation:

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

Run the appropriate command in your project's root directory based on your package manager:

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

Step 2: Reorganize Content​

Move all content from the language-specific directories [lang] folder to the main app folder:

  1. Transfer all files and folders from [lang] to the root app folder.
  2. After moving the content, ensure that all links and references in your project are updated to reflect the new locations.
  3. Delete the [lang] folder.

Step 3: Additional Modifications​

Common Changes​

  • Replace the getLocalizedUrl function with the actual URL in the whole project like below:

    - getLocalizedUrl('/your-url', locale as Locale) or getLocalizedUrl('/your-url', lang)
    + '/your-url'

Layout and Navigation Changes:​

  • Go to the src/components/layout/vertical/Navigation.tsx file and Remove the dictionary: Awaited<ReturnType<typeof getDictionary>> from the Props and dictionary={dictionary} from the <VerticalMenu> component.

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

    1. Remove the { dictionary }: { dictionary: Awaited<ReturnType<typeof getDictionary>> } from the props parameter of the VerticalMenu function.

    2. Replace the label and href from SubMenu, MenuItem and MenuSection in the whole file as below:

      <SubMenu label={dictionary['navigation'].dashboards} icon={<i className='ri-home-smile-line' />}>
        <MenuItem href={'/${locale}/dashboards/analytics'}>{dictionary['navigation'].analytics}</MenuItem>
      </SubMenu>

      to:

      <SubMenu label='dashboards' icon={<i className='ri-home-smile-line' />}>
        <MenuItem href='/dashboards/analytics'>analytics</MenuItem>
      </SubMenu>

    3. Remove the unused variable and it's releted import from the VerticalMenu.tsx file.

    4. You need to remove dictionary parameter from menuData function in <GenerateVerticalMenu menuData={menuData(dictionary, params)} /> from src/components/layout/vertical/VerticalMenu.tsx file.

  • Go to the src/components/layout/horizontal/HorizontalMenu.tsx file and make the same changes above in the VerticalMenu.tsx file.

  • Also you need to remove the dictionary: Awaited<ReturnType<typeof getDictionary>> from the parameter and replace the label as above mentioned and remove excludeLang from the src/data/navigation/verticalMenuData.tsx and src/data/navigation/horizontalMenuData.tsx files.

  • Go to the src/components/layout/horizontal/Header.tsx file and make the following changes.

    1. Remove the dictionary from the props parameter of the Header function.

    2. Remove the dictionary={dictionary} from the <Navigation> component.

    3. Remove the unused imports.

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

    1. Remove the dictionary from the props parameter of the Navigation function and dictionary={dictionary} from the <HorizontalMenu> component.

  • Remove the src/components/layout/shared/LanguageDropdown.tsx file and it's related import from the whole project.

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

    1. Remove the TranslationWrapper component and it's related import.

    2. Remove lang param from the <html> tag.

    3. Remove the params from the RootLayout function.

    4. Replace the following:

      - const direction = i18n.langDirection[params.lang]
      + const direction = 'ltr'

  • Please note that you have to replace const direction = 'ltr' as mentioned above in all the files where const direction = i18n.langDirection[params.lang] is used.

  • Go to the src/app/(dashboard)/(private)/layout.tsx file and make the above changes and also make the following changes:

    1. Add the disableDirection prop in the <Customizer> component.

      <Customizer dir={direction} disableDirection />

    2. Remove the dictionary={dictionary} from the <Navigation> and <Header> components and it's related variable and imports.

    3. Remove the params from the Layout function.

    4. Remove locale from the AuthGuard component.

  • Go to the src/app/(blank-layout-pages)/(guest-only)/layout.tsx file and make the following changes:

    1. Remove the params from the Layout function.

    2. Remove the lang from the GuestOnlyRoute component

HOC(Higher Order Component) changes​

  • Go to the src/hocs/AuthGuard.tsx file and make the following changes.

    1. Remove the locale from the AuthGaurd function.

    2. Remove lang from the AuthRedirect component.

  • Remove the src/hocs/TranslationWrapper.tsx file and it's related import from the whole project.

Other Components Changes:​

  • Remove the excludeLang related code from the src/components/layout/shared/search/index.tsx and src/components/layout/shared/search/index.tsx files.

  • Go to the src/components/AuthRedirect.tsx file and make the following changes.

    1. Remove the lang from the AuthRedirect function.

  • Remove the src/components/LangRedirect.tsx file and it's related import from the whole project.

  • Go to the src/components/GenerateMenu.tsx and make the following changes.

    1. Remove the following statement:

      - const href = rest.href?.startsWith('http') ? rest.href : rest.href && (excludeLang ? rest.href : getLocalizedUrl(rest.href, locale as Locale))

    2. Replace the href={href} with href={menuItem.href} in the <VerticalMenuItem> and <HorizontalMenuItem> components.

    3. Remove the unused variable and it's releted import from the GenerateMenu.tsx file.

Configs and Utils changes:​

  • Remove the following files/folders and it's related import from the whole project:

    • src/config/i18n.ts
    • src/utils/i18n.ts
    • src/utils/getDictionary.ts
    • src/data/directories

next.config Modifications:​

  • Go to the next.config file and replace the redirects with the following code:

    redirects: async () => {
      return [
        {
          source: '/',
          destination: '/dashboards/crm', // replace with your default route
          permanent: true
        }
      ]
     }

If you get any type errors after doing the above steps, you need to refresh/reopen your editor or you can remove .next folder and then try to run your project.

That's it! You have successfully removed i18n from your project 🥳.