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

## Why

依存アップグレード（Next.js 16 / React 19 / ESLint 9 フラットコンフィグ等）で `yarn build` /
`yarn lint` / CI インストールが壊れていたので、ビルドチェーンを再び通るようにする。併せて調査中に判明した Tailwind /
shadcn スタック一式や、役目を終えた依存の残骸も掃除する。

## What

### Next.js 16 / ESLint 9 アップグレード対応

- `next lint` 廃止に伴う ESLint フラットコンフィグ移行（`eslint.config.mjs`）
- Next.js 16 の purity lint / set-state-in-effect ルールに合わせた
`GameTyping.tsx` / `RankingTabs.tsx` / `game/page.tsx` の修正
- `tsconfig.json` を Next.js の自動補正（`jsx: react-jsx` /
`.next/dev/types/**` の include 追加）に追従

### Tailwind / shadcn スタック撤去

実態として `@tailwind` ディレクティブも Tailwind
ユーティリティクラスも使われていないため、関連パッケージ・設定ファイルを一式削除:

- **dependencies** 削除: `clsx`, `tailwind-merge`, `tailwindcss-animate`,
`@radix-ui/react-slot`, `@radix-ui/react-toast`,
`class-variance-authority`, `lucide-react`
- **devDependencies** 削除: `tailwindcss`, `@tailwindcss/postcss`,
`postcss`, `autoprefixer`
- **ファイル削除**: `tailwind.config.ts`, `postcss.config.js`,
`src/libs/shadcn/`
- autoprefixing は Next.js 組み込みの PostCSS パイプライン（`postcss-preset-env`）に委譲

### 依存整備

- `@testing-library/react` の peer 要件である `@testing-library/dom` を明示追加
- `prettier` を `dependencies` → `devDependencies` に分類修正
- `@types/node` / `eslint` / `prettier` / `tsx` の patch / minor 追従
- `@next/codemod` が自動挿入した `@types/react` / `@types/react-dom` の
`resolutions` ブロックを削除（React 19 エコシステム成熟により不要、むしろ古い `19.0.1` / `19.0.2`
に固定される副作用が出ていた）
- `openapi-typescript` v6 → v7 bump に合わせて `v1.d.ts` を v7 format で再生成
- `RankingTabs.tsx` の未使用 `useCallback` import 削除
- Yarn 4（Corepack）で `yarn.lock` をクリーン再生成

## How

- `tsconfig.json` の差分（`jsx` 変更・include 追加）は Next.js 16 が `next build`
時に自動で書き戻すもので、手動の設計変更ではない。ログ上も `jsx was set to react-jsx (next.js uses
the React automatic runtime)` として明示される。
- `postcss.config.js` を削除することで Next.js 組み込みの PostCSS
デフォルトにフォールバックする構成。最終出力 CSS（ベンダープレフィックス等）は従前と同じ。
- ESLint は `^9.39.4` 固定（v10 非対応）: `eslint-plugin-react` が ESLint v10
で削除されたレガシー API（`context.getFilename()`）に依存しているため、上流修正
([jsx-eslint/eslint-plugin-react#3979](jsx-eslint/eslint-plugin-react#3979))
が公開されるまで v9 に留める。参考:
[vercel/next.js#89764](vercel/next.js#89764)
- lint は 0 errors（既存の `<img>` 6 件と 1 件の `react-hooks/exhaustive-deps`
警告のみ残る。いずれも今回のスコープ外）

## Validation

- `corepack yarn install --immutable`
- `corepack yarn format:ci`
- `corepack yarn lint`
- `corepack yarn build`
- `corepack yarn test --runInBand`

## References

- [Next.js 16 upgrade
guide](https://nextjs.org/docs/app/guides/upgrading/version-16)
- [Next.js ESLint migration / flat
config](https://nextjs.org/docs/app/api-reference/config/eslint)
- [Next.js
codemods](https://nextjs.org/docs/app/guides/upgrading/codemods)
- [Tailwind CSS v4 upgrade
guide](https://tailwindcss.com/docs/upgrade-guide)
- [vercel/next.js#89764 — ESLint v10
incompatibility](vercel/next.js#89764)

---------

Co-authored-by: Claude Opus 4.6 (1M context) <noreply@anthropic.com>

Author: KinjiKawaguchi

typing-app/.eslintrc.json

@@ -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/eslint.config.mjs

@@ -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/package.json

@@ -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/postcss.config.js

@@ -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/app/game/page.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[]>([]);