DEV-61: Add internationalization support

.gitignore

@@ -23,6 +23,7 @@
 # misc
 .DS_Store
 *.pem
+/.vscode/
 
 # debug
 npm-debug.log*

eslint.config.js

@@ -18,6 +18,11 @@ const eslintConfig = [
         quotes: "double",
         semi: true,
     }),
+    {
+        rules: {
+            "react/jsx-no-literals": "error",
+        },
+    },
     {
         ignores: ["build/"],
     },

locales/en.json

@@ -0,0 +1,15 @@
+{
+  "constructionPage": {
+    "title": "Pera by LexisLabs",
+    "subtitle": "We're building something special. Coming soon.",
+    "contactButton": "Contact us"
+  },
+  "sentryExamplePage": {
+    "getStarted": "Get started by sending us a sample error:",
+    "throwError": "Throw error!",
+    "nextLook": "Next, look for the error on the",
+    "issuesPage": "Issues Page",
+    "forMoreInfo": "For more information, see",
+    "theDocumentation": "the documentation"
+  }
+}

locales/es.json

@@ -0,0 +1,15 @@
+{
+  "constructionPage": {
+    "contactButton": "Contáctenos",
+    "subtitle": "Estamos construyendo algo especial. Muy pronto.",
+    "title": "Pera por LexisLabs"
+  },
+  "sentryExamplePage": {
+    "forMoreInfo": "Para más información, ver",
+    "getStarted": "Comience enviándonos un error de muestra:",
+    "issuesPage": "Página de emisión",
+    "nextLook": "A continuación, busque el error en el",
+    "theDocumentation": "la documentación",
+    "throwError": "¡Error!"
+  }
+}

locales/fr.json

@@ -0,0 +1,15 @@
+{
+  "constructionPage": {
+    "contactButton": "Contactez-nous",
+    "subtitle": "Nous construisons quelque chose de spécial. À venir.",
+    "title": "Pera par LexisLabs"
+  },
+  "sentryExamplePage": {
+    "forMoreInfo": "Pour en savoir plus, voir",
+    "getStarted": "Commencez par nous envoyer un exemple d'erreur:",
+    "issuesPage": "la Page des Problèmes",
+    "nextLook": "Ensuite, recherchez l'erreur sur",
+    "theDocumentation": "la documentation",
+    "throwError": "Lancer une erreur!"
+  }
+}

locales/ru.json

@@ -0,0 +1,15 @@
+{
+  "constructionPage": {
+    "contactButton": "Связаться с нами",
+    "subtitle": "Мы строим что -то особенное. Вскоре.",
+    "title": "Pera от LexisLabs"
+  },
+  "sentryExamplePage": {
+    "forMoreInfo": "Для получения дополнительной информации см.",
+    "getStarted": "Начните, отправив нам образец ошибки:",
+    "issuesPage": "Проблемы страницы",
+    "nextLook": "Далее ищите ошибку на",
+    "theDocumentation": "документация",
+    "throwError": "Бросить ошибку!"
+  }
+}

locales/zh.json

@@ -0,0 +1,15 @@
+{
+  "constructionPage": {
+    "contactButton": "联系我们",
+    "subtitle": "我们正在建造一些特别的东西。即将推出。",
+    "title": "LexisLabs 的 Pera"
+  },
+  "sentryExamplePage": {
+    "forMoreInfo": "有关更多信息，请参阅",
+    "getStarted": "通过向我们发送示例错误开始开始：",
+    "issuesPage": "问题页",
+    "nextLook": "接下来，在",
+    "theDocumentation": "文档",
+    "throwError": "投掷错误！"
+  }
+}

next.config.ts

@@ -1,12 +1,15 @@
 import { withSentryConfig } from "@sentry/nextjs";
 import type { NextConfig } from "next";
+import createNextIntlPlugin from "next-intl/plugin";
+
+const withNextIntl = createNextIntlPlugin();
 
 const nextConfig: NextConfig = {
     output: "standalone",
     distDir: "build",
 };
 
-export default withSentryConfig(nextConfig, {
+export default withSentryConfig(withNextIntl(nextConfig), {
 // For all available options, see:
 // https://www.npmjs.com/package/@sentry/webpack-plugin#options
 

package.json

@@ -17,6 +17,7 @@
     "@mui/material": "^6.4.6",
     "@sentry/nextjs": "^9.3.0",
     "next": "15.1.6",
+    "next-intl": "^3.26.5",
     "react": "^19.0.0",
     "react-dom": "^19.0.0"
   },

app/layout.tsx → src/app/layout.tsx

@@ -1,6 +1,8 @@
 import type { Metadata } from "next";
 import { Geist, Geist_Mono } from "next/font/google";
 import "./globals.css";
+import { NextIntlClientProvider } from "next-intl";
+import { getLocale, getMessages } from "next-intl/server";
 
 const geistSans = Geist({
     variable: "--font-geist-sans",
@@ -13,19 +15,24 @@ const geistMono = Geist_Mono({
 });
 
 export const metadata: Metadata = {
-    title: "Create Next App",
-    description: "Generated by create next app",
+    title: "Pera by Lexis Labs",
+    description: "AI-powered pronunciation training platform",
 };
 
-export default function RootLayout({
+export default async function RootLayout({
     children,
 }: Readonly<{
     children: React.ReactNode;
 }>) {
+    const locale = await getLocale();
+    const messages = await getMessages();
+
     return (
-        <html lang="en">
+        <html lang={locale}>
             <body className={`${geistSans.variable} ${geistMono.variable}`}>
-                {children}
+                <NextIntlClientProvider messages={messages}>
+                    {children}
+                </NextIntlClientProvider>
             </body>
         </html>
     );

app/page.tsx → src/app/page.tsx

@@ -8,6 +8,7 @@ import {
 } from "@mui/material";
 import { styled } from "@mui/material/styles";
 import { Construction } from "@mui/icons-material";
+import { useTranslations } from "next-intl";
 
 const StyledHero = styled(Box)(() => ({
     minHeight: "100vh",
@@ -18,6 +19,7 @@ const StyledHero = styled(Box)(() => ({
 }));
 
 export default function Home() {
+    const t = useTranslations("constructionPage");
     return (
         <StyledHero>
             <Container>
@@ -31,10 +33,10 @@ export default function Home() {
                 >
                     <Construction sx={{ fontSize: 60 }} />
                     <Typography variant="h2" fontWeight="bold">
-                        Pera by LexisLabs
+                        {t("title")}
                     </Typography>
                     <Typography variant="h5">
-                        We&apos;re building something special. Coming soon.
+                        {t("subtitle")}
                     </Typography>
                     <Button
                         variant="contained"
@@ -48,7 +50,7 @@ export default function Home() {
                             },
                         }}
                     >
-                        Contact Us
+                        {t("contactButton")}
                     </Button>
                 </Box>
             </Container>