Add localization to pages, header and footer

Fix import orders for useTranslation

Apply common translations for header and footer

lint

Fix getServerSideProps messages/id

website/public/locales/en/common.json

@@ -1,4 +1,17 @@
 {
+  "about": "About",
+  "account_settings": "Account Settings",
+  "connect": "Connect",
+  "conversational": "Conversational AI for everyone.",
+  "dashboard": "Dashboard",
   "discord": "Discord",
-  "github": "GitHub"
+  "docs": "Docs",
+  "github": "GitHub",
+  "legal": "Legal",
+  "privacy_policy": "Privacy Policy",
+  "report_a_bug": "Report a Bug",
+  "sign_in": "Sign In",
+  "sign_out": "Sign Out",
+  "terms_of_service": "Terms of Service",
+  "title": "Open Assistant"
 }

website/src/components/Footer.tsx

@@ -1,9 +1,11 @@
 import { Box, Divider, Flex, Text, useColorMode } from "@chakra-ui/react";
 import Image from "next/image";
 import Link from "next/link";
+import { useTranslation } from "next-i18next";
 import { useMemo } from "react";
 
 export function Footer() {
+  const { t } = useTranslation();
   const { colorMode } = useColorMode();
   const backgroundColor = colorMode === "light" ? "white" : "gray.800";
   const textColor = colorMode === "light" ? "black" : "gray.300";
@@ -33,10 +35,10 @@ export function Footer() {
 
             <Box>
               <Text fontSize="md" fontWeight="bold">
-                Open Assistant
+                {t("title")}
               </Text>
               <Text fontSize="sm" color="gray.500">
-                Conversational AI for everyone.
+                {t("conversational")}
               </Text>
             </Box>
           </Flex>
@@ -45,23 +47,23 @@ export function Footer() {
             <Box display="flex" flexDirection={["column", "row"]} gap={["6", "14"]} fontSize="sm">
               <Flex direction="column" alignItems={["center", "start"]}>
                 <Text fontWeight="bold" color={textColor}>
-                  Legal
+                  {t("legal")}
                 </Text>
-                <FooterLink href="/privacy-policy" label="Privacy Policy" />
-                <FooterLink href="/terms-of-service" label="Terms of Service" />
+                <FooterLink href="/privacy-policy" label={t("privacy_policy")} />
+                <FooterLink href="/terms-of-service" label={t("terms_of_service")} />
               </Flex>
               <Flex direction="column" alignItems={["center", "start"]}>
                 <Text fontWeight="bold" color={textColor}>
-                  Connect
+                  {t("connect")}
                 </Text>
-                <FooterLink href="https://github.com/LAION-AI/Open-Assistant" label="Github" />
-                <FooterLink href="https://ykilcher.com/open-assistant-discord" label="Discord" />
+                <FooterLink href="https://github.com/LAION-AI/Open-Assistant" label={t("github")} />
+                <FooterLink href="https://ykilcher.com/open-assistant-discord" label={t("discord")} />
               </Flex>
               <Flex direction="column" alignItems={["center", "start"]}>
                 <Text fontWeight="bold" color={textColor}>
-                  About
+                  {t("about")}
                 </Text>
-                <FooterLink href="https://projects.laion.ai/Open-Assistant" label="Docs" />
+                <FooterLink href="https://projects.laion.ai/Open-Assistant" label={t("docs")} />
               </Flex>
             </Box>
           </nav>

website/src/components/Header/Header.tsx

@@ -1,7 +1,8 @@
-import { Box, Button, Text, Flex } from "@chakra-ui/react";
+import { Box, Button, Flex, Text } from "@chakra-ui/react";
 import Image from "next/image";
 import Link from "next/link";
 import { useSession } from "next-auth/react";
+import { useTranslation } from "next-i18next";
 import { Flags } from "react-feature-flags";
 import { FaUser } from "react-icons/fa";
 
@@ -23,7 +24,8 @@ function AccountButton() {
   );
 }
 
-export function Header(props) {
+export function Header() {
+  const { t } = useTranslation();
   const { data: session } = useSession();
   const homeURL = session ? "/dashboard" : "/";
 
@@ -34,7 +36,7 @@ export function Header(props) {
           <Flex alignItems="center">
             <Image src="/images/logos/logo.svg" className="mx-auto object-fill" width="50" height="50" alt="logo" />
             <Text fontFamily="inter" fontSize="2xl" fontWeight="bold" ml="3">
-              Open Assistant
+              {t("title")}
             </Text>
           </Flex>
         </Link>

website/src/components/Header/UserMenu.tsx

@@ -13,6 +13,7 @@ import {
 } from "@chakra-ui/react";
 import NextLink from "next/link";
 import { signOut, useSession } from "next-auth/react";
+import { useTranslation } from "next-i18next";
 import React, { ElementType, useCallback } from "react";
 import { FiAlertTriangle, FiLayout, FiLogOut, FiSettings, FiShield } from "react-icons/fi";
 
@@ -25,6 +26,7 @@ interface MenuOption {
 }
 
 export function UserMenu() {
+  const { t } = useTranslation();
   const borderColor = useColorModeValue("gray.300", "gray.600");
   const handleSignOut = useCallback(() => {
     signOut({ callbackUrl: "/" });
@@ -36,23 +38,23 @@ export function UserMenu() {
   }
   const options: MenuOption[] = [
     {
-      name: "Dashboard",
+      name: t("dashboard"),
       href: "/dashboard",
-      desc: "Dashboard",
+      desc: t("dashboard"),
       icon: FiLayout,
       isExternal: false,
     },
     {
-      name: "Account Settings",
+      name: t("account_settings"),
       href: "/account",
-      desc: "Account Settings",
+      desc: t("account_settings"),
       icon: FiSettings,
       isExternal: false,
     },
     {
-      name: "Report a Bug",
+      name: t("report_a_bug"),
       href: "https://github.com/LAION-AI/Open-Assistant/issues/new/choose",
-      desc: "Report a Bug",
+      desc: t("report_a_bug"),
       icon: FiAlertTriangle,
       isExternal: true,
     },
@@ -60,9 +62,9 @@ export function UserMenu() {
 
   if (session.user.role === "admin") {
     options.unshift({
-      name: "Admin Dashboard",
+      name: t("admin_dashboard"),
       href: "/admin",
-      desc: "Admin Dashboard",
+      desc: t("admin_dashboard"),
       icon: FiShield,
       isExternal: false,
     });
@@ -105,7 +107,7 @@ export function UserMenu() {
         <MenuDivider />
         <MenuItem gap="3" borderRadius="md" p="4" onClick={handleSignOut}>
           <FiLogOut className="text-blue-500" aria-hidden="true" />
-          <Text>Sign Out</Text>
+          <Text>{t("sign_out")}</Text>
         </MenuItem>
       </MenuList>
     </Menu>

website/src/components/Hero.tsx

@@ -2,8 +2,8 @@ import { Box, Text, useColorMode } from "@chakra-ui/react";
 import Image from "next/image";
 import { useTranslation } from "next-i18next";
 
-import { Container } from "./Container";
 import { AnimatedCircles } from "./AnimatedCircles";
+import { Container } from "./Container";
 
 export function Hero() {
   const { t } = useTranslation("index");

website/src/components/Layout.tsx

@@ -23,7 +23,7 @@ export const getDefaultLayout = (page: React.ReactElement) => (
 
 export const getTransparentHeaderLayout = (page: React.ReactElement) => (
   <div className="grid grid-rows-[min-content_1fr_min-content] h-full justify-items-stretch">
-    <Header transparent={true} />
+    <Header />
     {page}
     <Footer />
   </div>
@@ -31,7 +31,7 @@ export const getTransparentHeaderLayout = (page: React.ReactElement) => (
 
 export const getDashboardLayout = (page: React.ReactElement) => (
   <Grid templateRows="min-content 1fr" h="full">
-    <Header transparent={true} />
+    <Header />
     <SideMenuLayout
       menuButtonOptions={[
         {
@@ -66,7 +66,7 @@ export const getDashboardLayout = (page: React.ReactElement) => (
 
 export const getAdminLayout = (page: React.ReactElement) => (
   <div className="grid grid-rows-[min-content_1fr_min-content] h-full justify-items-stretch">
-    <Header transparent={true} />
+    <Header />
     <SideMenuLayout
       menuButtonOptions={[
         {

website/src/pages/404.tsx

@@ -1,5 +1,6 @@
 import { Box, Button, Center, Link, Text } from "@chakra-ui/react";
 import Head from "next/head";
+import { serverSideTranslations } from "next-i18next/serverSideTranslations";
 import { FiAlertTriangle } from "react-icons/fi";
 import { EmptyState } from "src/components/EmptyState";
 import { getTransparentHeaderLayout } from "src/components/Layout";
@@ -40,4 +41,10 @@ function Error() {
 
 Error.getLayout = getTransparentHeaderLayout;
 
+export const getStaticProps = async ({ locale }) => ({
+  props: {
+    ...(await serverSideTranslations(locale, ["common"])),
+  },
+});
+
 export default Error;

website/src/pages/500.tsx

@@ -1,5 +1,6 @@
 import { Box, Button, Center, Link, Text } from "@chakra-ui/react";
 import Head from "next/head";
+import { serverSideTranslations } from "next-i18next/serverSideTranslations";
 import { FiAlertTriangle } from "react-icons/fi";
 import { EmptyState } from "src/components/EmptyState";
 import { getTransparentHeaderLayout } from "src/components/Layout";
@@ -43,4 +44,10 @@ function ServerError() {
 
 ServerError.getLayout = getTransparentHeaderLayout;
 
+export const getStaticProps = async ({ locale }) => ({
+  props: {
+    ...(await serverSideTranslations(locale, ["common"])),
+  },
+});
+
 export default ServerError;

website/src/pages/about.tsx

@@ -1,4 +1,5 @@
 import Image from "next/image";
+import { serverSideTranslations } from "next-i18next/serverSideTranslations";
 import { CallToAction } from "src/components/CallToAction";
 import { Container } from "src/components/Container";
 import Roadmap from "src/components/Roadmap";
@@ -36,4 +37,10 @@ const AboutPage = () => {
   );
 };
 
+export const getStaticProps = async ({ locale }) => ({
+  props: {
+    ...(await serverSideTranslations(locale, ["common"])),
+  },
+});
+
 export default AboutPage;

website/src/pages/account/edit.tsx

@@ -2,6 +2,7 @@ import { Button, Input, InputGroup } from "@chakra-ui/react";
 import Head from "next/head";
 import Router from "next/router";
 import { useSession } from "next-auth/react";
+import { serverSideTranslations } from "next-i18next/serverSideTranslations";
 import React from "react";
 import { Control, useForm, useWatch } from "react-hook-form";
 
@@ -30,6 +31,12 @@ export default function Account() {
   );
 }
 
+export const getStaticProps = async ({ locale }) => ({
+  props: {
+    ...(await serverSideTranslations(locale, ["common"])),
+  },
+});
+
 const EditForm = () => {
   const { data: session } = useSession();
 

website/src/pages/account/index.tsx

@@ -2,6 +2,7 @@ import { Button } from "@chakra-ui/react";
 import Head from "next/head";
 import Link from "next/link";
 import { useSession } from "next-auth/react";
+import { serverSideTranslations } from "next-i18next/serverSideTranslations";
 import React from "react";
 
 export default function Account() {
@@ -31,3 +32,9 @@ export default function Account() {
     </>
   );
 }
+
+export const getStaticProps = async ({ locale }) => ({
+  props: {
+    ...(await serverSideTranslations(locale, ["common"])),
+  },
+});

website/src/pages/admin/index.tsx

@@ -1,6 +1,7 @@
 import Head from "next/head";
 import { useRouter } from "next/router";
 import { useSession } from "next-auth/react";
+import { serverSideTranslations } from "next-i18next/serverSideTranslations";
 import { useEffect } from "react";
 import { getAdminLayout } from "src/components/Layout";
 import UsersCell from "src/components/UsersCell";
@@ -44,4 +45,10 @@ const AdminIndex = () => {
 
 AdminIndex.getLayout = getAdminLayout;
 
+export const getStaticProps = async ({ locale }) => ({
+  props: {
+    ...(await serverSideTranslations(locale, ["common"])),
+  },
+});
+
 export default AdminIndex;

website/src/pages/admin/manage_user/[id].tsx

@@ -3,6 +3,7 @@ import { InferGetServerSidePropsType } from "next";
 import Head from "next/head";
 import { useRouter } from "next/router";
 import { useSession } from "next-auth/react";
+import { serverSideTranslations } from "next-i18next/serverSideTranslations";
 import { useEffect } from "react";
 import { useForm } from "react-hook-form";
 import { getAdminLayout } from "src/components/Layout";
@@ -111,7 +112,7 @@ const ManageUser = ({ user }: InferGetServerSidePropsType<typeof getServerSidePr
 /**
  * Fetch the user's data on the server side when rendering.
  */
-export async function getServerSideProps({ query }) {
+export async function getServerSideProps({ query, locale }) {
   const backend_user = await oasstApiClient.fetch_user(query.id);
   const local_user = await prisma.user.findUnique({
     where: { id: backend_user.id },
@@ -126,6 +127,7 @@ export async function getServerSideProps({ query }) {
   return {
     props: {
       user,
+      ...(await serverSideTranslations(locale, ["common"])),
     },
   };
 }

website/src/pages/auth/signin.tsx

@@ -5,6 +5,7 @@ import Head from "next/head";
 import Link from "next/link";
 import { useRouter } from "next/router";
 import { ClientSafeProvider, getProviders, signIn } from "next-auth/react";
+import { serverSideTranslations } from "next-i18next/serverSideTranslations";
 import React, { useEffect, useRef, useState } from "react";
 import { useForm } from "react-hook-form";
 import { FaBug, FaDiscord, FaEnvelope, FaGithub } from "react-icons/fa";
@@ -47,7 +48,6 @@ interface SigninProps {
 function Signin({ providers }: SigninProps) {
   const router = useRouter();
   const { discord, email, github, credentials } = providers;
-  const emailEl = useRef(null);
   const [error, setError] = useState("");
 
   useEffect(() => {
@@ -151,7 +151,7 @@ function Signin({ providers }: SigninProps) {
 
 Signin.getLayout = (page) => (
   <div className="grid grid-rows-[min-content_1fr_min-content] h-full justify-items-stretch">
-    <Header transparent={true} />
+    <Header />
     {page}
     <Footer />
   </div>
@@ -209,11 +209,12 @@ const DebugSigninForm = ({ credentials, bgColorClass }: { credentials: ClientSaf
   );
 };
 
-export const getServerSideProps: GetServerSideProps<SigninProps> = async () => {
+export const getServerSideProps: GetServerSideProps<SigninProps> = async ({ locale }) => {
   const providers = await getProviders();
   return {
     props: {
       providers,
+      ...(await serverSideTranslations(locale, ["common"])),
     },
   };
 };

website/src/pages/create/assistant_reply.tsx

@@ -1,4 +1,5 @@
 import Head from "next/head";
+import { serverSideTranslations } from "next-i18next/serverSideTranslations";
 import { TaskEmptyState } from "src/components/EmptyState";
 import { getDashboardLayout } from "src/components/Layout";
 import { LoadingScreen } from "src/components/Loading/LoadingScreen";
@@ -29,4 +30,10 @@ const AssistantReply = () => {
 
 AssistantReply.getLayout = getDashboardLayout;
 
+export const getStaticProps = async ({ locale }) => ({
+  props: {
+    ...(await serverSideTranslations(locale, ["common"])),
+  },
+});
+
 export default AssistantReply;

website/src/pages/create/initial_prompt.tsx

@@ -1,4 +1,5 @@
 import Head from "next/head";
+import { serverSideTranslations } from "next-i18next/serverSideTranslations";
 import { TaskEmptyState } from "src/components/EmptyState";
 import { getDashboardLayout } from "src/components/Layout";
 import { LoadingScreen } from "src/components/Loading/LoadingScreen";
@@ -29,4 +30,10 @@ const InitialPrompt = () => {
 
 InitialPrompt.getLayout = getDashboardLayout;
 
+export const getStaticProps = async ({ locale }) => ({
+  props: {
+    ...(await serverSideTranslations(locale, ["common"])),
+  },
+});
+
 export default InitialPrompt;

website/src/pages/create/user_reply.tsx

@@ -1,4 +1,5 @@
 import Head from "next/head";
+import { serverSideTranslations } from "next-i18next/serverSideTranslations";
 import { TaskEmptyState } from "src/components/EmptyState";
 import { getDashboardLayout } from "src/components/Layout";
 import { LoadingScreen } from "src/components/Loading/LoadingScreen";
@@ -29,4 +30,10 @@ const UserReply = () => {
 
 UserReply.getLayout = getDashboardLayout;
 
+export const getStaticProps = async ({ locale }) => ({
+  props: {
+    ...(await serverSideTranslations(locale, ["common"])),
+  },
+});
+
 export default UserReply;

website/src/pages/dashboard.tsx

@@ -1,5 +1,6 @@
 import { Flex } from "@chakra-ui/react";
 import Head from "next/head";
+import { serverSideTranslations } from "next-i18next/serverSideTranslations";
 import { LeaderboardTable, TaskOption, WelcomeCard } from "src/components/Dashboard";
 import { getDashboardLayout } from "src/components/Layout";
 import { TaskCategory } from "src/components/Tasks/TaskTypes";
@@ -22,4 +23,10 @@ const Dashboard = () => {
 
 Dashboard.getLayout = (page) => getDashboardLayout(page);
 
+export const getStaticProps = async ({ locale }) => ({
+  props: {
+    ...(await serverSideTranslations(locale, ["common"])),
+  },
+});
+
 export default Dashboard;

website/src/pages/evaluate/rank_assistant_replies.tsx

@@ -1,4 +1,5 @@
 import Head from "next/head";
+import { serverSideTranslations } from "next-i18next/serverSideTranslations";
 import { TaskEmptyState } from "src/components/EmptyState";
 import { getDashboardLayout } from "src/components/Layout";
 import { LoadingScreen } from "src/components/Loading/LoadingScreen";
@@ -29,4 +30,10 @@ const RankAssistantReplies = () => {
 
 RankAssistantReplies.getLayout = getDashboardLayout;
 
+export const getStaticProps = async ({ locale }) => ({
+  props: {
+    ...(await serverSideTranslations(locale, ["common"])),
+  },
+});
+
 export default RankAssistantReplies;

website/src/pages/evaluate/rank_initial_prompts.tsx

@@ -1,4 +1,5 @@
 import Head from "next/head";
+import { serverSideTranslations } from "next-i18next/serverSideTranslations";
 import { TaskEmptyState } from "src/components/EmptyState";
 import { getDashboardLayout } from "src/components/Layout";
 import { LoadingScreen } from "src/components/Loading/LoadingScreen";
@@ -29,4 +30,10 @@ const RankInitialPrompts = () => {
 
 RankInitialPrompts.getLayout = getDashboardLayout;
 
+export const getStaticProps = async ({ locale }) => ({
+  props: {
+    ...(await serverSideTranslations(locale, ["common"])),
+  },
+});
+
 export default RankInitialPrompts;

website/src/pages/evaluate/rank_user_replies.tsx

@@ -1,4 +1,5 @@
 import Head from "next/head";
+import { serverSideTranslations } from "next-i18next/serverSideTranslations";
 import { TaskEmptyState } from "src/components/EmptyState";
 import { getDashboardLayout } from "src/components/Layout";
 import { LoadingScreen } from "src/components/Loading/LoadingScreen";
@@ -29,4 +30,10 @@ const RankUserReplies = () => {
 
 RankUserReplies.getLayout = getDashboardLayout;
 
+export const getStaticProps = async ({ locale }) => ({
+  props: {
+    ...(await serverSideTranslations(locale, ["common"])),
+  },
+});
+
 export default RankUserReplies;

website/src/pages/label/label_assistant_reply.tsx

@@ -1,4 +1,5 @@
 import Head from "next/head";
+import { serverSideTranslations } from "next-i18next/serverSideTranslations";
 import { TaskEmptyState } from "src/components/EmptyState";
 import { getDashboardLayout } from "src/components/Layout";
 import { LoadingScreen } from "src/components/Loading/LoadingScreen";
@@ -29,4 +30,10 @@ const LabelAssistantReply = () => {
 
 LabelAssistantReply.getLayout = getDashboardLayout;
 
+export const getStaticProps = async ({ locale }) => ({
+  props: {
+    ...(await serverSideTranslations(locale, ["common"])),
+  },
+});
+
 export default LabelAssistantReply;

website/src/pages/label/label_initial_prompt.tsx

@@ -1,4 +1,5 @@
 import Head from "next/head";
+import { serverSideTranslations } from "next-i18next/serverSideTranslations";
 import { TaskEmptyState } from "src/components/EmptyState";
 import { getDashboardLayout } from "src/components/Layout";
 import { LoadingScreen } from "src/components/Loading/LoadingScreen";
@@ -29,4 +30,10 @@ const LabelInitialPrompt = () => {
 
 LabelInitialPrompt.getLayout = getDashboardLayout;
 
+export const getStaticProps = async ({ locale }) => ({
+  props: {
+    ...(await serverSideTranslations(locale, ["common"])),
+  },
+});
+
 export default LabelInitialPrompt;

website/src/pages/label/label_prompter_reply.tsx

@@ -1,4 +1,5 @@
 import Head from "next/head";
+import { serverSideTranslations } from "next-i18next/serverSideTranslations";
 import { TaskEmptyState } from "src/components/EmptyState";
 import { getDashboardLayout } from "src/components/Layout";
 import { LoadingScreen } from "src/components/Loading/LoadingScreen";
@@ -29,4 +30,10 @@ const LabelPrompterReply = () => {
 
 LabelPrompterReply.getLayout = getDashboardLayout;
 
+export const getStaticProps = async ({ locale }) => ({
+  props: {
+    ...(await serverSideTranslations(locale, ["common"])),
+  },
+});
+
 export default LabelPrompterReply;

website/src/pages/leaderboard.tsx

@@ -1,5 +1,6 @@
 import { Box, Heading, Tab, TabList, TabPanel, TabPanels, Tabs } from "@chakra-ui/react";
 import Head from "next/head";
+import { serverSideTranslations } from "next-i18next/serverSideTranslations";
 import { getDashboardLayout } from "src/components/Layout";
 import { LeaderboardGridCell } from "src/components/LeaderboardGridCell";
 import { LeaderboardTimeFrame } from "src/types/Leaderboard";
@@ -45,4 +46,10 @@ const Leaderboard = () => {
 
 Leaderboard.getLayout = getDashboardLayout;
 
+export const getStaticProps = async ({ locale }) => ({
+  props: {
+    ...(await serverSideTranslations(locale, ["common"])),
+  },
+});
+
 export default Leaderboard;

website/src/pages/messages/[id]/index.tsx

@@ -1,5 +1,6 @@
 import { Box, Text, useColorModeValue } from "@chakra-ui/react";
 import Head from "next/head";
+import { serverSideTranslations } from "next-i18next/serverSideTranslations";
 import { getDashboardLayout } from "src/components/Layout";
 import { MessageLoading } from "src/components/Loading/MessageLoading";
 import { MessageTableEntry } from "src/components/Messages/MessageTableEntry";
@@ -48,10 +49,13 @@ const MessageDetail = ({ id }: { id: string }) => {
   );
 };
 
-MessageDetail.getInitialProps = async ({ query }) => {
-  const { id } = query;
-  return { id };
-};
-
 MessageDetail.getLayout = (page) => getDashboardLayout(page);
+
+export const getServerSideProps = async ({ locale, query }) => ({
+  props: {
+    id: query.id,
+    ...(await serverSideTranslations(locale, ["common"])),
+  },
+});
+
 export default MessageDetail;

website/src/pages/messages/index.tsx

@@ -1,5 +1,6 @@
 import { Box, CircularProgress, SimpleGrid, Text, useColorModeValue } from "@chakra-ui/react";
 import Head from "next/head";
+import { serverSideTranslations } from "next-i18next/serverSideTranslations";
 import { getDashboardLayout } from "src/components/Layout";
 import { MessageTable } from "src/components/Messages/MessageTable";
 import { get } from "src/lib/api";
@@ -54,4 +55,10 @@ const MessagesDashboard = () => {
 
 MessagesDashboard.getLayout = getDashboardLayout;
 
+export const getStaticProps = async ({ locale }) => ({
+  props: {
+    ...(await serverSideTranslations(locale, ["common"])),
+  },
+});
+
 export default MessagesDashboard;

website/src/pages/privacy-policy.tsx

@@ -1,5 +1,6 @@
 import { Box, Heading, Link, Stack, Text, useColorModeValue } from "@chakra-ui/react";
 import Head from "next/head";
+import { serverSideTranslations } from "next-i18next/serverSideTranslations";
 import { getTransparentHeaderLayout } from "src/components/Layout";
 import { PolicyChapterCard } from "src/components/PolicyCards/PolicyChapterCard";
 import { PolicySectionCard } from "src/components/PolicyCards/PolicySectionCard";
@@ -224,4 +225,10 @@ const PrivacyPolicy = () => {
 
 PrivacyPolicy.getLayout = getTransparentHeaderLayout;
 
+export const getStaticProps = async ({ locale }) => ({
+  props: {
+    ...(await serverSideTranslations(locale, ["common"])),
+  },
+});
+
 export default PrivacyPolicy;

website/src/pages/terms-of-service.tsx

@@ -1,5 +1,6 @@
 import { Box, Heading, Stack } from "@chakra-ui/react";
 import Head from "next/head";
+import { serverSideTranslations } from "next-i18next/serverSideTranslations";
 import { getTransparentHeaderLayout } from "src/components/Layout";
 import { PolicyChapterCard } from "src/components/PolicyCards/PolicyChapterCard";
 import { PolicySectionCard } from "src/components/PolicyCards/PolicySectionCard";
@@ -189,4 +190,10 @@ const TermsOfService = () => {
 
 TermsOfService.getLayout = getTransparentHeaderLayout;
 
+export const getStaticProps = async ({ locale }) => ({
+  props: {
+    ...(await serverSideTranslations(locale, ["common"])),
+  },
+});
+
 export default TermsOfService;