Gogo uses next-intl to support multiple languages. Even though we have not fully included all the translations, the template is ready to support multilanguage. You may see it in action in the user menu by changing the language with the dropdown.
All the necessary files can be found in the src/i18n folder. Translations are located in the src/i18n/messages folder.
1import { useTranslations } from "use-intl";
2
3import { Typography } from "@mui/material";
4
5export default function ActionTranslation() {
6 const t = useTranslations("dashboard");
7
8 return (
9 <Typography variant="body1" component="p">
10 {t("menu-ui")}
11 </Typography>
12 );
13}1import React from "react";
2import { useTransition } from "react";
3
4import { Button } from "@mui/material";
5
6import { LocaleOption } from "@/constants";
7import { setClientLocale } from "@/i18n/locale";
8
9export default function UserLanguageSwitch() {
10 const [isPending, startTransition] = useTransition();
11
12 function handleOnChangeLocale(value: LocaleOption) {
13 startTransition(() => {
14 setClientLocale(value);
15 });
16 }
17
18 return (
19 <>
20 <Button
21 onClick={() => {
22 handleOnChangeLocale("en");
23 }}
24 disabled={isPending}
25 >
26 En
27 </Button>
28 <Button
29 onClick={() => {
30 handleOnChangeLocale("de");
31 }}
32 disabled={isPending}
33 >
34 De
35 </Button>
36 </>
37 );
38}