build(frontend): Next.js 16アップグレード後のビルド修復と依存整理

typing-app/eslint.config.mjs

@@ -0,0 +1,6 @@
+import nextCoreWebVitals from "eslint-config-next/core-web-vitals";
+import eslintConfigPrettier from "eslint-config-prettier/flat";
+
+const eslintConfig = [...nextCoreWebVitals, eslintConfigPrettier];
+
+export default eslintConfig;

typing-app/package.json

@@ -6,57 +6,44 @@
     "dev": "next dev --turbopack",
     "build": "next build",
     "start": "next start",
-    "lint": "next lint",
+    "lint": "eslint .",
     "format": "prettier . --write",
     "format:ci": "prettier . --check",
     "sanitize": "tsx scripts/sanitizeText.ts",
     "test": "jest",
     "test:watch": "jest --watch"
   },
   "dependencies": {
-    "@radix-ui/react-slot": "^1.1.0",
-    "@radix-ui/react-toast": "^1.2.2",
-    "class-variance-authority": "^0.7.1",
-    "clsx": "^2.1.1",
-    "lucide-react": "^0.468.0",
-    "next": "15.2.4",
-    "openapi-fetch": "0.13.3",
-    "prettier": "^3.4.2",
-    "react": "19.0.0",
-    "react-dom": "19.0.0",
+    "next": "16.2.3",
+    "openapi-fetch": "0.17.0",
+    "react": "19.2.5",
+    "react-dom": "19.2.5",
     "server-only": "^0.0.1",
-    "sharp": "^0.33.5",
-    "tailwind-merge": "^2.5.5",
-    "tailwindcss-animate": "^1.0.7"
+    "sharp": "^0.34.5"
   },
   "devDependencies": {
-    "@jest/globals": "^29.7.0",
-    "@testing-library/jest-dom": "^6.6.3",
-    "@testing-library/react": "^14.3.1",
-    "@types/node": "^20.17.10",
-    "@types/react": "19.0.1",
-    "@types/react-dom": "19.0.2",
-    "autoprefixer": "^10.4.20",
-    "eslint": "^8.57.1",
-    "eslint-config-next": "15.1.0",
-    "eslint-config-prettier": "^9.1.0",
-    "jest": "^29.7.0",
-    "jest-environment-jsdom": "^29.7.0",
-    "openapi-typescript": "6.7.6",
-    "postcss": "^8.4.49",
-    "sass": "^1.85.0",
-    "tailwindcss": "^3.4.16",
-    "tsx": "^4.19.3",
-    "typescript": "^5.7.2"
+    "@jest/globals": "^30.3.0",
+    "@testing-library/dom": "^10.4.1",
+    "@testing-library/jest-dom": "^6.9.1",
+    "@testing-library/react": "^16.3.2",
+    "@types/node": "^25.6.0",
+    "@types/react": "19.2.14",
+    "@types/react-dom": "19.2.3",
+    "eslint": "^9.39.4",
+    "eslint-config-next": "16.2.3",
+    "eslint-config-prettier": "^10.1.8",
+    "jest": "^30.3.0",
+    "jest-environment-jsdom": "^30.3.0",
+    "openapi-typescript": "7.13.0",
+    "prettier": "^3.8.2",
+    "sass": "^1.99.0",
+    "tsx": "^4.21.0",
+    "typescript": "^6.0.2"
   },
   "repository": "https://github.com/su-its/typing",
   "author": "su-its",
   "packageManager": "yarn@4.6.0",
   "engines": {
     "npm": "use yarn instead"
-  },
-  "resolutions": {
-    "@types/react": "19.0.1",
-    "@types/react-dom": "19.0.2"
   }
 }

typing-app/src/app/game/page.tsx

@@ -3,11 +3,13 @@ import fs from "fs";
 
 const filenames = fs.readdirSync("public/texts/");
 
+const getRandomSubjectText = () => {
+  const randomFilename = filenames[Math.floor(Math.random() * filenames.length)] ?? filenames[0];
+  return fs.readFileSync(`public/texts/${randomFilename}`, "utf-8");
+};
+
 export default function Typing() {
-  const subjectText = fs.readFileSync(
-    `public/texts/${filenames[Math.floor(Math.random() * filenames.length)]}`,
-    "utf-8"
-  );
+  const subjectText = getRandomSubjectText();
   const subjectTextOneLine = subjectText.replace(/\n/gm, " ");
 
   return <GamePage subjectText={subjectTextOneLine} />;

typing-app/src/components/organism/RankingTabs.tsx

@@ -3,7 +3,7 @@
 import RankingTable from "../organism/RankingTable";
 import { Pagination } from "../molecules/Pagination";
 import RefreshButton from "../atoms/RefreshButton";
-import { useCallback, useEffect, useState } from "react";
+import { useEffect, useState } from "react";
 import { client } from "@/libs/api";
 import type { components } from "@/libs/api/v1";
 import { showErrorToast } from "@/utils/toast";
@@ -53,30 +53,42 @@ const RankingTabs = () => {
   const [rankingStartFrom, setRankingStartFrom] = useState(1);
   const [sortBy, setSortBy] = useState<"accuracy" | "keystrokes">("accuracy");
   const [totalRankingCount, setTotalRankingCount] = useState<number>(0);
+  const [refreshKey, setRefreshKey] = useState(0);
 
   const LIMIT = 10; //TODO: Configファイルから取得
 
-  const fetchData = useCallback(async () => {
-    const { data, error } = await client.GET("/scores/ranking", {
-      params: {
-        query: {
-          sort_by: sortBy,
-          start: rankingStartFrom,
-          limit: LIMIT,
+  useEffect(() => {
+    let isCancelled = false;
+
+    const fetchData = async () => {
+      const { data, error } = await client.GET("/scores/ranking", {
+        params: {
+          query: {
+            sort_by: sortBy,
+            start: rankingStartFrom,
+            limit: LIMIT,
+          },
         },
-      },
-    });
-    if (data) {
-      setScoreRankings(data.rankings);
-      setTotalRankingCount(data.total_count);
-    } else {
-      showErrorToast(error);
-    }
-  }, [sortBy, rankingStartFrom]);
+      });
 
-  useEffect(() => {
-    fetchData();
-  }, [fetchData]);
+      if (isCancelled) {
+        return;
+      }
+
+      if (data) {
+        setScoreRankings(data.rankings);
+        setTotalRankingCount(data.total_count);
+      } else {
+        showErrorToast(error);
+      }
+    };
+
+    void fetchData();
+
+    return () => {
+      isCancelled = true;
+    };
+  }, [refreshKey, sortBy, rankingStartFrom]);
 
   const handleTabChange = (index: number) => {
     const sortOption = index === 0 ? "accuracy" : "keystrokes";
@@ -118,7 +130,7 @@ const RankingTabs = () => {
             <RefreshButton
               onClick={() => {
                 setRankingStartFrom(1);
-                fetchData();
+                setRefreshKey((prev) => prev + 1);
               }}
             />
           </div>

typing-app/src/components/templates/GameTyping.tsx

@@ -31,7 +31,7 @@ const GameTyping: React.FC<GameTypingProps> = ({ nextPage, subjectText, setScore
   });
 
   // 開始時刻と処理フラグの参照
-  const startTimeRef = useRef<number>(Date.now());
+  const startTimeRef = useRef<number>(0);
   const isProcessingRef = useRef(false);
 
   const typingQueueRef = useRef<number[]>([]);