TLDR:
Introduction
I have been doing a little internet velocity efficiency checks on the Subsequent.js web sites we’re constructing at my present firm currently, and one of many issues that I observed is that the interpretation system we’re utilizing is including loads of weight to the bundle measurement. I made a decision to create a minimal translation system that does not add any dependencies to the bundle measurement.
In fact that is no shade to the prevailing translation programs on the market, however I needed to see if I may create one thing that’s minimal and dependency-free, with out all of the performance which programs like next-intl present.
Organising the backend
For the aim of this weblog and demo I made a decision to make use of POEditor to host my translations.
They’ve a beneficiant free tier which is greater than sufficient for this demo.
I created a venture, added 2 languages (NL and EN) and added a couple of translations to it.
Organising the frontend
Getting began with a brand new Subsequent.js app is straightforward, simply run npx create-next-app, observe the steps in your terminal and also you’re good to go.
For this demo and weblog I am utilizing the Pages Router, I’d do one other weblog put up on doing the identical within the App Router later, however this would possibly work a bit in a different way since React Context cannot be utilized in RSC.
In subsequent.config.js I added
i18n: {
defaultLocale: 'en',
locales: ['en', 'nl'],
},
so as to add an additional language (Dutch) to the venture.
Organising the interpretation fetching from POEditor
Utilizing the Fetch API, I am fetching the translations for my venture from POEditor within the specified language.
I am creating an object with the translations, the place the hot button is the interpretation key and the worth is the interpretation itself.
export const getDictionaryItems = async (locale: string) => {
const urlencoded = new URLSearchParams();
urlencoded.append("id", course of.env.POEDITOR_PROJECT_ID!);
urlencoded.append("api_token", course of.env.POEDITOR_API_TOKEN!);
urlencoded.append("language", locale);
const dictionaryItems = await fetch(
"https://api.poeditor.com/v2/phrases/record",
{
methodology: "POST",
physique: urlencoded,
},
).then((res) => res.json());
const phrases = dictionaryItems.end result.phrases as {
time period: string;
translation: {
content material: string;
};
}[];
return Object.fromEntries(
phrases.map((el) => [el.term, el.translation.content]),
);
};
Organising the interpretation context
Right here I am making a React Context to retailer the translations.
import { createContext } from "react";
export const DictionaryContext = createContext<
Document<string, string> | undefined | null
>(null);
Organising the interpretation supplier
Within the _app.tsx file (the entrypoint of the Subsequent.js app) I am importing my DictionaryContext, and utilizing it is Supplier to offer the translations to all of the pages in my app by wrapping all the things within the render perform within the Supplier.
The DictionaryContext.Supplier takes a worth prop, which ought to be the translations coming from POEditor. I fill the worth with pageProps.dictionaryItems, which can be offered by the getStaticProps (or getServersideProps) perform within the pages.
import '@/kinds/globals.css';
import kind { AppProps } from 'subsequent/app';
import { Inter } from 'subsequent/font/google';
const inter = Inter({ subsets: ['latin'] });
import { DictionaryContext } from '../lib/dictionary-context';
import Hyperlink from 'subsequent/hyperlink';
import { useRouter } from 'subsequent/router';
export default perform App({ Part, pageProps }: AppProps) {
const router = useRouter();
return (
<DictionaryContext.Supplier worth={pageProps.dictionaryItems}>
<header className="flex justify-center">
<nav>
<ul className="flex py-4 gap-x-4">
<li>
<Hyperlink
className={`p-2 border ${
router.asPath === '/' ? 'border-orange-500' : ''
}`}
href="/"
>
Residence
</Hyperlink>
</li>
<li>
<Hyperlink
className={`p-2 border ${
router.asPath === '/element' ? 'border-orange-500' : ''
}`}
href="/element"
>
Detailpage
</Hyperlink>
</li>
</ul>
</nav>
<div className="fastened top-4 right-4">
<Hyperlink
className={`${
router.locale === 'en' ? 'text-orange-500 font-bold' : ''
}`}
href={router.asPath}
locale="en"
>
EN
</Hyperlink>
<Hyperlink
className={`ml-2 ${
router.locale === 'nl' ? 'text-orange-500 font-bold' : ''
}`}
href={router.asPath}
locale="nl"
>
NL
</Hyperlink>
</div>
</header>
<essential className={inter.className}>
<Part {...pageProps} />
</essential>
</DictionaryContext.Supplier>
);
}
Organising the interpretation hook
For my customized translation hook I am utilizing the useContext hook to get the translations from the DictionaryContext and return the interpretation for the given key. I additionally added a second parameter to the perform, which is an object containing variables which can be utilized within the translation. The interpretation ought to comprise the variable identify between double curly braces, and the variable can be changed with the worth handed to the interpretation perform.
import { useContext } from "react";
import { DictionaryContext } from "../lib/dictionary-context";
const useTranslation = () => {
const translations = useContext(DictionaryContext);
const t = (
key: string,
variables?: quantity;
,
) => {
if (!translations) {
return key;
}
if (variables) {
return Object.keys(variables).cut back((acc, variableKey) => {
return acc.substitute(
new RegExp(`{{${variableKey}}}`, "g"),
variables[variableKey].toString(),
);
}, translations[key] || key);
}
return translations[key] || key;
};
return t;
};
export default useTranslation;
Organising the interpretation fetching within the pages
In my demo I am utilizing getStaticProps to keep away from too many fetches to my backend, however you possibly can additionally use getServerSideProps if you wish to fetch the translations on each request.
Within the getStaticProps perform I am fetching the translations for the present locale, and returning them within the dictionaryItems prop.
I additionally selected so as to add the revalidate: 300 choice to ensure the translations are only refetched every 5 minutes.
import Cta from "@/elements/Cta";
import useTranslation from "@/hooks/use-translation";
import { getDictionaryItems } from "@/lib/api";
import { GetStaticProps } from "subsequent";
export default perform Residence() {
const t = useTranslation();
return (
<div className="flex flex-col items-center justify-center h-screen">
<h1 className="text-3xl font-bold mb-4">{t("homepage.title")}</h1>
<p className="italic">{t("homepage.description")}</p>
<Cta />
</div>
);
}
export const getStaticProps: GetStaticProps = async ({ locale }) => {
const dictionaryItems = await getDictionaryItems(locale ?? "en");
return {
props: {
dictionaryItems,
},
revalidate: 300,
};
};
Inside my React elements I can now merely use the useTranslation hook to get the interpretation perform, after which use the perform to translate the given key. Within the Cta part I am additionally utilizing the second parameter of the interpretation perform to go a variable to the interpretation. The interpretation worth in POEditor seems like this: Cta description with count_variable: {{count_variable}}.
import useTranslation from "@/hooks/use-translation";
const Cta = () => {
const t = useTranslation();
return (
<div className="p-6 border text-center mt-4">
<h2>{t("cta.title")}</h2>
<p>{t("cta.description", { count_variable: 20 })}</p>
</div>
);
};
export default Cta;
Conclusion
It is a very fundamental translation system, however it works effectively for my use case, and has been sufficient for the tasks at work.
I hope it is useful for you as effectively, and when you have any questions or suggestions, be at liberty to depart a remark beneath.
Hyperlinks to supply code and reside demo could be discovered on the prime of this weblog put up.
