How to use internationalization in a page
This guide is intended for users who are using the full-version
or have implemented internationalization in the starter-kit
. If you have not implemented internationalization in your project, follow the steps mentioned in this guide.
We provide internationalization for navigation only. However, there might be times when you need to translate text within a page. Here's how you can achieve that:
-
Ensure you have the following packages installed:
@formatjs/intl-localematcher
negotiator
@types/negotiator
(for TypeScript versions only)
-
Define the locale in your path. For example, use
http://localhost:3000/en/apps/chat
whereen
is the locale referring to the English language -
Create JSON files named after each language you need in the locales directory. For instance, if you are using English (
en
), French (fr
), and Arabic (ar
), your files should look like this:en.json{
"helloWorld": "Hello World",
"text": {
"paragraph": "This is a paragraph"
},
"navigation": {
...
}
}fr.json{
"helloWorld": "Bonjour le monde",
"text": {
"paragraph": "C'est un paragraphe"
},
"navigation": {
...
}
}ar.json{
"helloWorld": "مرحبا بالعالم",
"text": {
"paragraph": "هذه فقرة"
},
"navigation": {
...
}
} -
Import
getDictionary
and the{ locale }
type in the page where you want to translate content:import { getDictionary } from '@/utils/get-dictionary'
import type { Locale } from '@configs/i18n' -
Initialize
getDictionary
and pass the locale as a parameter. This function returns a promise, which you can use to get the dictionary:// Type Imports
import type { Locale } from '@configs/i18n'
// Util Imports
import { getDictionary } from '@/utils/get-dictionary'
const Component = async ({ params }: { params: { lang: Locale } }) => {
// getDictionary can only be called on the server side,
// calling it on the client side will throw an error
const dictionary = await getDictionary(params.lang)
return (
<>
<div>{dictionary.helloWorld}</div>
<p>{dictionary['text'].paragraph}</p>
</>
)
}
export default Component
That's it! You can now translate any text in your page. 🥳 🎉