Removing i18n from the Template
This guide provides steps to remove i18n (internationalization) from your project.
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.
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
- yarn
- npm
pnpm uninstall @formatjs/intl-localematcher @types/negotiator negotiator
yarn uninstall @formatjs/intl-localematcher @types/negotiator negotiator
npm 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:
- Transfer all files and folders from
[lang]
to the rootapp
folder. - After moving the content, ensure that all links and references in your project are updated to reflect the new locations.
- 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 thedictionary: Awaited<ReturnType<typeof getDictionary>>
from theProps
anddictionary={dictionary}
from the<VerticalMenu>
component. -
Go to the
src/components/layout/vertical/VerticalMenu.tsx
file and make the following changes.-
Remove the
{ dictionary }: { dictionary: Awaited<ReturnType<typeof getDictionary>> }
from theprops
parameter of theVerticalMenu
function. -
Replace the
label
andhref
from SubMenu, MenuItem and MenuSection in the whole file as below:<SubMenu label={dictionary['navigation'].dashboards} icon={<i className='tabler-smart-home' />}>
<MenuItem href={'/${locale}/dashboards/analytics'}>{dictionary['navigation'].analytics}</MenuItem>
</SubMenu>to:
<SubMenu label='dashboards' icon={<i className='tabler-smart-home' />}>
<MenuItem href='/dashboards/analytics'>analytics</MenuItem>
</SubMenu> -
Remove the unused variable and it's releted import from the
VerticalMenu.tsx
file. -
You need to remove
dictionary
parameter frommenuData
function in<GenerateVerticalMenu menuData={menuData(dictionary, params)} />
fromsrc/components/layout/vertical/VerticalMenu.tsx
file.
-
-
Go to the
src/components/layout/horizontal/HorizontalMenu.tsx
file and make the same changes above in theVerticalMenu.tsx
file. -
Also you need to remove the
dictionary: Awaited<ReturnType<typeof getDictionary>>
from the parameter and replace thelabel
as above mentioned and removeexcludeLang
from thesrc/data/navigation/verticalMenuData.tsx
andsrc/data/navigation/horizontalMenuData.tsx
files. -
Go to the
src/components/layout/horizontal/Header.tsx
file and make the following changes.-
Remove the
dictionary
from theprops
parameter of theHeader
function. -
Remove the
dictionary={dictionary}
from the<Navigation>
component. -
Remove the unused imports.
-
-
Go to the
src/components/layout/horizontal/Navigation.tsx
file and make the following changes.- Remove the
dictionary
from theprops
parameter of theNavigation
function anddictionary={dictionary}
from the<HorizontalMenu>
component.
- Remove the
-
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.-
Remove the
TranslationWrapper
component and it's related import. -
Remove
lang
param from the<html>
tag. -
Remove the
params
from theRootLayout
function. -
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 whereconst 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:-
Add the
disableDirection
prop in the<Customizer>
component.<Customizer dir={direction} disableDirection />
-
Remove the
dictionary={dictionary}
from the<Navigation>
and<Header>
components and it's related variable and imports. -
Remove the
params
from theLayout
function. -
Remove
locale
from theAuthGuard
component.
-
-
Go to the
src/app/(blank-layout-pages)/(guest-only)/layout.tsx
file and make the following changes:-
Remove the
params
from theLayout
function. -
Remove the
lang
from theGuestOnlyRoute
component
-
HOC(Higher Order Component) changes
-
Go to the
src/hocs/AuthGuard.tsx
file and make the following changes.-
Remove the
locale
from theAuthGaurd
function. -
Remove
lang
from theAuthRedirect
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 thesrc/components/layout/shared/search/index.tsx
andsrc/components/layout/shared/search/index.tsx
files. -
Go to the
src/components/AuthRedirect.tsx
file and make the following changes.- Remove the
lang
from theAuthRedirect
function.
- Remove the
-
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.-
Remove the following statement:
- const href = rest.href?.startsWith('http') ? rest.href : rest.href && (excludeLang ? rest.href : getLocalizedUrl(rest.href, locale as Locale))
-
Replace the
href={href}
withhref={menuItem.href}
in the<VerticalMenuItem>
and<HorizontalMenuItem>
components. -
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 🥳.