Merge pull request #250 from Game-as-a-Service/feature/i18n

feat: i18n

configs/i18nConfigs.ts

@@ -0,0 +1,2 @@
+export const LOCALES = ["zh-TW"];
+export const DEFAULT_LOCALE = "zh-TW";

containers/room/RoomListView.tsx

@@ -1,6 +1,7 @@
 import { ClipboardEvent, FC, useState, useEffect } from "react";
 import { useRouter } from "next/router";
 import { AxiosError } from "axios";
+import { useTranslation } from "next-i18next";
 
 import {
   Room,
@@ -24,6 +25,7 @@ type Props = {
 const INIT_PASSWORD = ["", "", "", ""];
 
 const RoomsListView: FC<Props> = ({ status }) => {
+  const { t } = useTranslation("rooms");
   const { fetch } = useRequest();
   const { nextPage, backPage, data, loading, isError, errorMessage } =
     usePagination({
@@ -41,7 +43,7 @@ const RoomsListView: FC<Props> = ({ status }) => {
     const targetRoom = data.find((room) => room.id === id);
 
     if (targetRoom?.currentPlayers === targetRoom?.maxPlayers) {
-      firePopup({ title: "房間人數已滿" });
+      firePopup({ title: t("room_is_full") });
       return;
     }
 
@@ -77,19 +79,9 @@ const RoomsListView: FC<Props> = ({ status }) => {
           router.push(`/rooms/${_roomId}`);
         })
         .catch((err: AxiosError<RoomEntryError>) => {
-          switch (err.response?.data.message) {
-            case "room is full":
-              firePopup({ title: "房間人數已滿!" });
-              break;
-            case "wrong password":
-              firePopup({ title: "房間密碼錯誤!" });
-              break;
-            case "you can only join 1 room":
-              firePopup({ title: "一人只能進入一間房!" });
-              break;
-            default:
-              firePopup({ title: "error!" });
-          }
+          const msg = err.response?.data.message.replaceAll(" ", "_");
+          if (!msg) return firePopup({ title: "error!" });
+          firePopup({ title: t(msg) });
         })
         .finally(() => {
           // setSelectedRoom(undefined);

next-i18next.config.js

@@ -0,0 +1,8 @@
+/** @type {import('next-i18next').UserConfig} */
+module.exports = {
+  i18n: {
+    defaultLocale: "zh-TW",
+    locales: ["zh-TW"],
+  },
+  reloadOnPrerender: process.env.NODE_ENV === "development",
+};

next.config.js

@@ -1,4 +1,5 @@
 /** @type {import('next').NextConfig} */
+const { i18n } = require("./next-i18next.config.js");
 
 let withBundleAnalyzer = (config) => config;
 
@@ -9,6 +10,7 @@ if (process.env.ANALYZE === "true") {
 }
 
 const nextConfig = {
+  i18n,
   output: "standalone",
   eslint: {
     ignoreDuringBuilds: true,

package.json

@@ -28,10 +28,13 @@
     "axios": "1.4.0",
     "clsx": "1.2.1",
     "http-proxy-middleware": "2.0.6",
+    "i18next": "^23.2.11",
     "js-cookie": "3.0.5",
     "next": "13.4.8",
+    "next-i18next": "^14.0.0",
     "react": "18.2.0",
     "react-dom": "18.2.0",
+    "react-i18next": "^13.0.2",
     "sharp": "0.32.1",
     "tailwind-merge": "1.13.2"
   },

pages/_app.tsx

@@ -1,6 +1,7 @@
 import { AppProps } from "next/app";
 import { NextPage } from "next";
 import { ReactElement, ReactNode } from "react";
+import { appWithTranslation } from "next-i18next";
 
 import "@/styles/reset.css";
 import "@/styles/global.css";
@@ -25,7 +26,7 @@ type AppWithProps = AppProps & {
   Component: NextPageWithProps;
 };
 
-export default function App({ Component, pageProps }: AppWithProps) {
+function App({ Component, pageProps }: AppWithProps) {
   const { env } = getEnv();
   const isAnonymous =
     Component.Anonymous || !!process.env.NEXT_PUBLIC_CI_MODE || false;
@@ -60,3 +61,5 @@ export default function App({ Component, pageProps }: AppWithProps) {
     </ToastQueueProvider>
   );
 }
+
+export default appWithTranslation(App);

pages/index.tsx

@@ -2,32 +2,40 @@ import { GetStaticProps } from "next";
 import Button from "@/components/shared/Button";
 import CreateRoomModal from "@/components/lobby/CreateRoomModal";
 import Link from "next/link";
+import { serverSideTranslations } from "next-i18next/serverSideTranslations";
+import { useTranslation } from "next-i18next";
 
 import Carousel, { mockCarouselItems } from "@/components/shared/Carousel";
 
 export default function Home() {
+  const { t } = useTranslation("rooms");
   return (
     <>
       <h1 className="text-white">遊戲大廳！</h1>
-      <div className="px-[18px] mt-[12px] mb-[22px]" style={{width: 'calc(100vw - 71px)'}}>
-      <Carousel
-        itemWidth={332}
-        itemHeight={158}
-        items={mockCarouselItems}
-        itemsToSlide={2}
-        autoplay
-      />
+      <div
+        className="px-[18px] mt-[12px] mb-[22px]"
+        style={{ width: "calc(100vw - 71px)" }}
+      >
+        <Carousel
+          itemWidth={332}
+          itemHeight={158}
+          items={mockCarouselItems}
+          itemsToSlide={2}
+          autoplay
+        />
       </div>
       <CreateRoomModal />
       <Button component={Link} href="/rooms">
-        查看房間列表
+        {t("rooms_list")}
       </Button>
     </>
   );
 }
 
-export const getStaticProps: GetStaticProps = async () => {
+export const getStaticProps: GetStaticProps = async ({ locale }) => {
   return {
-    props: {},
+    props: {
+      ...(await serverSideTranslations(locale ?? "zh-TW", ["rooms"])),
+    },
   };
 };

pages/rooms.tsx

@@ -1,23 +1,29 @@
 import { RoomType } from "@/requests/rooms";
 import RoomsListView from "@/containers/room/RoomListView";
 import Tabs from "@/components/shared/Tabs";
+import { serverSideTranslations } from "next-i18next/serverSideTranslations";
+import { useTranslation } from "next-i18next";
+import { GetStaticProps } from "next";
 
 type TabsProps = {
   key: RoomType;
   label: string;
 }[];
 
-const tabs: TabsProps = [
-  {
-    key: RoomType.WAITING,
-    label: "正在等待玩家配對",
-  },
-  {
-    key: RoomType.PLAYING,
-    label: "遊戲已開始",
-  },
-];
 const Rooms = () => {
+  const { t } = useTranslation("rooms");
+
+  const tabs: TabsProps = [
+    {
+      key: RoomType.WAITING,
+      label: t("rooms_waiting"),
+    },
+    {
+      key: RoomType.PLAYING,
+      label: t("rooms_playing"),
+    },
+  ];
+
   return (
     <div className="bg-dark29 rounded-[10px] py-5 px-6 h-full">
       <Tabs
@@ -32,4 +38,12 @@ const Rooms = () => {
   );
 };
 
+export const getStaticProps: GetStaticProps = async ({ locale }) => {
+  return {
+    props: {
+      ...(await serverSideTranslations(locale ?? "zh-TW", ["rooms"])),
+    },
+  };
+};
+
 export default Rooms;

public/locales/zh-tw/rooms.json

@@ -0,0 +1,8 @@
+{
+  "room_is_full": "房間人數已滿!",
+  "wrong_password": "密碼錯誤",
+  "you_can_only_join_1_room": "一人只能進入一間房!",
+  "rooms_list": "查看房間列表",
+  "rooms_waiting": "正在等待玩家配對",
+  "rooms_playing": "遊戲已開始"
+}