unprefixed-intl
An i18n library enabling translations without URL prefixes
There is a wrapper for next.js here
Usage
Add an unprefixed-intl.config.json
file to the project root:
{
"messagesPath": "/src/messages",
"defaultLang": "en",
"maxAcceptedLanguageSearch": 3,
"allowLanguageCode": true
}
That will result in the interface (will be used by the package):
interface Config{
/** Path for the `messages` folder, that will alloc the .json files with the translations, (en-US.json, ...) */
messagesPath:string,
/** The default language, that will be used if the preferred language was not found */
defaultLang:string,
/** From the list of preferred languages a loop will be run to look for the best match available, this is the
* limit of iterations this loop can do */
maxAcceptedLanguageSearch:number
/** If true: if the complete code is not found, the language code can be used instead, e.g. if the preferred
* language is `en-US`, but there is no `en-US.json` file but rather a ` en.json`, it will be used */
allowLanguageCode:boolean
}
Add the translation files inside the messagesPath
directory:
en
language example: /src/messages/en.json
{
"Home.component1": {
"hello_message": "Hello! Welcome!",
"phrase": "I just got my driver's license, and now I need to get gas for my truck. In the fall, I'll enroll in college, and I'll make sure to check the schedule of my favorite soccer team."
},
"Home.component2": {
"popup.warning_message": "Remember that the default translation file, defined in `defaultLang`, must exist!"
}
}
es
language example: /src/messages/es.json
{
"Home.component1": {
"hello_message": "¡Hola! ¡Sea bienvenido!",
"phrase": "Acabo de obtener mi licencia de conducir y ahora necesito gasolina para mi camión. En el otoño, me inscribiré en la universidad y me aseguraré de consultar el calendario de mi equipo de fútbol favorito."
},
"Home.component2": {
"popup.warning_message": "Recuerde que el archivo de traducción predeterminado, definido en `defaultLang`, ¡debe existir!"
}
}
en-GB
language example: /src/messages/en-GB.json
{
"Home.component1": {
"hello_message": "Hello! Welcome!",
"phrase": "I've just got my driving licence, and now I need to get petrol for my lorry. In the autumn, I'll enrol in university, and I'll make sure to check the timetable of my favourite football team."
},
"Home.component2": {
"popup.warning_message": "Remember that the default translation file, defined in `defaultLang`, must exist!"
}
}
In the place you want to read the translations:
/src/app/page.tsx
import { getTranslations } from "unprefixed-intl"
const acceptLanguages = ["en-US","en"]
/*
here you will receive the function that returns the
translations, based on a path (`"Home.component1"`),
and a string array (`acceptLanguages`), the order of
the elements of this array is important, as it
determines which translations will be prioritized
*/
const t = getTranslations("Home.component1", acceptLanguages)
In addition
You can use generate
to generate files based in translations api, in that example, the Google Cloud Translate api
import { generate } from "unprefixed-intl"
import { v2 } from "@google-cloud/translate"
const CREDENTIALS = JSON.parse(/*secret, check the Google Cloud Translation api for more info*/)
const translate = new v2.Translate({
credentials: CREDENTIALS,
projectId: CREDENTIALS.project_id,
})
async function translateTextFromSource(
text: string,
sourceLanguage: string,
targetLanguage: string,
) {
const [response] = await translate.translate(text, {
from: sourceLanguage,
to: targetLanguage,
})
return response
}
const fromLanguage = "en"
generate(
fromLanguage,
[
//["en", "en"], // English
["zh", "zh"], // Chinese Mandarin
["hi", "hi"], // Hindi
["es", "es"], // Spanish
["fr", "fr"], // French
["ar", "ar"], // Arabic
["bn", "bn"], // Bengali
["ru", "ru"], // Russian
["pt-BR", "pt"], // Portuguese from Brazil
["pt-PT", "pt-PT"], // Portuguese from Portugal
["pt", "pt"], // Portuguese
["id", "id"], // Indonesian
["de", "de"], // German
["ja", "ja"], // Japanese
["ur", "ur"], // Urdu
["it", "it"], // Italian
["ko", "ko"], // Korean
["tr", "tr"], // Turkish
["vi", "vi"], // Vietnamese
["pl", "pl"], // Polish
["jv", "jv"], // Javanese
["pa", "pa"], // Punjabi
],
(text, to) => translateTextFromSource(text, fromLanguage, to),
(to) => {
console.log(`Successfully generated ${to} translations.`)
return true
},
(error) => {
console.error("Error during translation:", error)
return false
},
)