Refactor/internationalization

.vscode/settings.json

@@ -1,6 +1,5 @@
 {
-    "cSpell.words": [
-        "ایران",
-        "برای"
+    "i18n-ally.localesPaths": [
+        "public/locales"
     ]
 }

components/Guide/GuidItem.js

@@ -1,3 +1,4 @@
+"use client";
 /* eslint-disable react/display-name */
 import {
   Alert,
@@ -13,9 +14,9 @@ import {
   TableCell,
   Paper,
 } from "@mui/material";
-import { Box } from "@mui/system";
 import React, { useState } from "react";
 import ContentCopyIcon from "@mui/icons-material/ContentCopy";
+import { useTranslation } from "next-i18next";
 const GuideItem = ({ children }) => {
   return (
     <Grid width="100%" paddingY="50px">
@@ -54,6 +55,8 @@ GuideItem.Description = ({ children }) => {
 };
 
 GuideItem.Inputs = ({ children }) => {
+  // eslint-disable-next-line react-hooks/rules-of-hooks
+  const { t } = useTranslation();
   return (
     <TableContainer
       component={Paper}
@@ -69,16 +72,16 @@ GuideItem.Inputs = ({ children }) => {
         <TableHead>
           <TableRow>
             <TableCell align="center" sx={{ fontFamily: "iran-yekan" }}>
-              نام
+              {t("queryBuilder:table.expand.guide.table.column.name")}
             </TableCell>
             <TableCell align="center" sx={{ fontFamily: "iran-yekan" }}>
-              توضیحات
+              {t("queryBuilder:table.expand.guide.table.column.description")}
             </TableCell>
             <TableCell align="center" sx={{ fontFamily: "iran-yekan" }}>
-              ضروری
+              {t("queryBuilder:table.expand.guide.table.column.required")}
             </TableCell>
             <TableCell align="center" sx={{ fontFamily: "iran-yekan" }}>
-              نوع جواب
+              {t("queryBuilder:table.expand.guide.table.column.responseType")}
             </TableCell>
           </TableRow>
         </TableHead>
@@ -110,6 +113,9 @@ GuideItem.Url = ({ children, domain }) => {
     setOpen(false);
   };
 
+  // eslint-disable-next-line react-hooks/rules-of-hooks
+  const { t } = useTranslation();
+
   return (
     <Alert
       severity="info"
@@ -121,7 +127,7 @@ GuideItem.Url = ({ children, domain }) => {
           severity="success"
           sx={{ width: "100%", fontFamily: "iran-yekan" }}
         >
-          کپی شد
+          {t("queryBuilder:table.expand.guide.table.feedback.copied")}
         </Alert>
       </Snackbar>
       {domain}

components/Header/Introduction/IntroductionContent.js

@@ -2,9 +2,11 @@ import React, { useContext } from "react";
 import { Box, Grid, Typography } from "@mui/material";
 import styles from "./styles.module.css";
 import { ThemeContext } from "../../../context/ThemeProvider";
+import { Trans, useTranslation } from "next-i18next";
 
 const Introduction = () => {
   const { state } = useContext(ThemeContext);
+  const { t } = useTranslation();
 
   return (
     <Grid
@@ -29,10 +31,12 @@ const Introduction = () => {
           fontFamily="iran-yekan-bold"
           fontSize="35px"
         >
-          {" "}
-          وب سرویس
-          <span> ‌شهر و استان </span>
-          های ایران
+          <Trans
+            i18nKey="introduction:content.title"
+            components={{
+              span: <span />,
+            }}
+          />
         </Typography>
         <Typography
           color={state === "light" ? "black" : "white"}
@@ -42,8 +46,7 @@ const Introduction = () => {
           fontFamily="iran-yekan"
           width={["80%", "100"]}
         >
-          وب‌سایت وب سرویس شهر و استان‌های ایران API‌ای برای دریافت اطلاعات
-          شهرها و استان‌ها، شامل نام، کد و موقعیت جغرافیایی، ارائه می‌دهد.
+          {t("introduction:content.description")}
         </Typography>
       </Box>
     </Grid>

components/QueryBuilder/QueryBuilder.js

@@ -1,3 +1,4 @@
+'use client'
 import {
   Box,
   Collapse,
@@ -23,10 +24,13 @@ import {
   materialLight,
 } from "react-syntax-highlighter/dist/cjs/styles/prism";
 import { ThemeContext } from "../../context/ThemeProvider";
+import { useTranslation } from "next-i18next";
 
 export const QueryBuilder = ({ domain }) => {
   const { state } = useContext(ThemeContext);
 
+  const { t } = useTranslation();
+
   const [checked, setChecked] = useState(1);
 
   const [tab, setTab] = useState(0);
@@ -219,7 +223,7 @@ export const QueryBuilder = ({ domain }) => {
                       gutterBottom
                       component="div"
                     >
-                      ورودی ها
+                      {t("queryBuilder:table.expand.inputs")}
                     </Typography>
                     <GuideItem.Inputs>
                       <GuideItem.InputItem>
@@ -229,7 +233,9 @@ export const QueryBuilder = ({ domain }) => {
                         {row.example.parameter.description}
                       </GuideItem.InputItem>
                       <GuideItem.InputItem>
-                        {row.example.parameter.isRequired ? "بله" : "خیر"}
+                        {row.example.parameter.isRequired
+                          ? t("queryBuilder:table.expand.yes")
+                          : t("queryBuilder:table.expand.no")}
                       </GuideItem.InputItem>
                       <GuideItem.InputItem>
                         {row.example.parameter.responseType}
@@ -245,7 +251,7 @@ export const QueryBuilder = ({ domain }) => {
                       gutterBottom
                       component="div"
                     >
-                      نمونه جواب
+                      {t("queryBuilder:table.expand.exampleResponse")}
                     </Typography>
                     <SyntaxHighlighter
                       wrapLongLines
@@ -287,8 +293,8 @@ export const QueryBuilder = ({ domain }) => {
         zIndex="999"
       >
         <Tabs value={tab} width="100%" onChange={(_, newTab) => setTab(newTab)}>
-          <Tab label="استان" style={{ fontSize: 12 }} />
-          <Tab label="شهر" style={{ fontSize: 12 }} />
+          <Tab label={t("queryBuilder:tab.state")} style={{ fontSize: 12 }} />
+          <Tab label={t("queryBuilder:tab.city")} style={{ fontSize: 12 }} />
         </Tabs>
 
         <br />
@@ -302,10 +308,10 @@ export const QueryBuilder = ({ domain }) => {
                 <TableCell />
                 <TableCell />
                 <TableCell style={{ fontSize: 13 }} width="20%" align="right">
-                  عنوان
+                  {t("queryBuilder:table.column.title")}
                 </TableCell>
                 <TableCell style={{ fontSize: 13 }} width="60%" align="right">
-                  توضیحات
+                  {t("queryBuilder:table.column.description")}
                 </TableCell>
               </TableRow>
             </TableHead>

next-i18next.config.js

@@ -0,0 +1,35 @@
+const introduction = require("./public/locales/fa/introduction.json");
+const queryBuilder = require("./public/locales/fa/query-builder.json");
+
+/**
+ * @type {import('next-i18next').UserConfig}
+ */
+module.exports = {
+  resources: {
+    fa: {
+      introduction,
+      queryBuilder,
+    },
+  },
+  // https://www.i18next.com/overview/configuration-options#logging
+  debug: process.env.NODE_ENV === "development",
+  i18n: {
+    defaultLocale: "fa",
+    locales: ["fa"],
+  },
+  /** To avoid issues when deploying to some paas (vercel...) */
+  localePath:
+    typeof window === "undefined"
+      ? require("path").resolve("./public/locales")
+      : "/locales",
+
+  reloadOnPrerender: process.env.NODE_ENV === "development",
+
+  /**
+   * @link https://github.com/i18next/next-i18next#6-advanced-configuration
+   */
+  // saveMissing: false,
+  // strictMode: true,
+  // serializeConfig: false,
+  // react: { useSuspense: false }
+};

next.config.js

@@ -1,7 +1,10 @@
+const { i18n } = require("./next-i18next.config");
+
 /** @type {import('next').NextConfig} */
 const isProd = process.env.NODE_ENV === "production";
 const nextConfig = {
   reactStrictMode: true,
+  i18n,
   assetPrefix: isProd ? process.env.WEBSITE_URL : "",
 };
 

package.json

@@ -16,11 +16,14 @@
     "@mui/material": "^5.6.1",
     "@mui/styles": "^5.6.2",
     "axios": "^1.7.2",
+    "i18next": "^23.16.4",
     "lodash": "^4.17.21",
     "next": "^14.2.3",
+    "next-i18next": "^15.3.1",
     "nextjs-cors": "^2.1.1",
     "react": "18.0.0",
     "react-dom": "18.0.0",
+    "react-i18next": "^15.1.0",
     "react-json-view": "^1.21.3",
     "react-syntax-highlighter": "^15.5.0",
     "react-tweet-embed": "^2.0.0",

pages/_app.js

@@ -1,13 +1,14 @@
-import ThemeProvider from '../context/ThemeProvider';
-import '../styles/globals.css'
-
-
-
+import { appWithTranslation } from "next-i18next";
+import i18nextConfig from "../next-i18next.config";
+import ThemeProvider from "../context/ThemeProvider";
+import "../styles/globals.css";
 
 function MyApp({ Component, pageProps }) {
-  return <ThemeProvider>
-    <Component {...pageProps} />
-  </ThemeProvider>
+  return (
+    <ThemeProvider>
+      <Component {...pageProps} />
+    </ThemeProvider>
+  );
 }
 
-export default MyApp
+export default appWithTranslation(MyApp, i18nextConfig);

public/locales/fa/common.json

@@ -0,0 +1 @@
+{}

public/locales/fa/introduction.json

@@ -0,0 +1,6 @@
+{
+  "content": {
+    "title": "وب سرویس <span>شهر و استان</span> های ایران",
+    "description": "وب‌سایت وب سرویس شهر و استان‌های ایران API‌ای برای دریافت اطلاعات شهرها و استان‌ها، شامل نام، کد و موقعیت جغرافیایی، ارائه می‌دهد."
+  }
+}

public/locales/fa/query-builder.json

@@ -0,0 +1,32 @@
+{
+  "tab": {
+    "state": "استان",
+    "city": "شهر"
+  },
+  "table": {
+    "column": {
+      "title": "عنوان",
+      "description": "توضیحات"
+    },
+    "expand": {
+      "exampleResponse": "نمونه جواب",
+      "yes": "بله",
+      "no": "خیر",
+      "inputs": "ورودی ها",
+
+      "guide": {
+        "table": {
+          "column":{
+            "name": "نام",
+            "description": "توضیحات",
+            "required": "اجباری",
+            "responseType": "نوع جواب"
+          },
+          "feedback": {
+            "copied": "کپی شد"
+          }
+        }
+      }
+    }
+  }
+}