feat: migrate to Next.js 16 - update next/eslint-config-next, fix cache APIs and lint config

Agent-Logs-Url: https://github.com/ut-code/my-code/sessions/44e22f86-35da-4845-b037-636927196b2a

Co-authored-by: na-trium-144 <100704180+na-trium-144@users.noreply.github.com>

Author: Copilot

app/(docs)/@chat/chat/[chatId]/page.tsx

@@ -6,7 +6,7 @@ import {
 } from "@/lib/chatHistory";
 import { getMarkdownSections, getPagesList } from "@/lib/docs";
 import { ChatAreaContainer, ChatAreaContent } from "./chatArea";
-import { unstable_cacheLife, unstable_cacheTag } from "next/cache";
+import { cacheLife, cacheTag } from "next/cache";
 import { isCloudflare } from "@/lib/detectCloudflare";
 
 export default async function ChatPage({
@@ -56,8 +56,8 @@ export default async function ChatPage({
 
 async function getChatOneFromCache(chatId: string, userId?: string) {
   "use cache";
-  unstable_cacheLife("days");
-  unstable_cacheTag(cacheKeyForChat(chatId));
+  cacheLife("days");
+  cacheTag(cacheKeyForChat(chatId));
 
   if (!userId) {
     return null;

app/(docs)/@docs/[lang]/[pageId]/page.tsx

@@ -14,7 +14,7 @@ import {
   PagePath,
   PageSlug,
 } from "@/lib/docs";
-import { unstable_cacheLife, unstable_cacheTag } from "next/cache";
+import { cacheLife, cacheTag } from "next/cache";
 import { isCloudflare } from "@/lib/detectCloudflare";
 import { DocsAutoRedirect } from "./autoRedirect";
 
@@ -83,12 +83,12 @@ async function getChatFromCache(path: PagePath, userId?: string) {
   // 一方、use cacheの関数内でheaders()にはアクセスできない。
   // したがって、外でheaders()を使ってuserIdを取得した後、関数の中で再度drizzleを初期化しないといけない。
   "use cache";
-  unstable_cacheLife("days");
+  cacheLife("days");
 
   if (!userId) {
     return [];
   }
-  unstable_cacheTag(cacheKeyForPage(path, userId));
+  cacheTag(cacheKeyForPage(path, userId));
 
   if (isCloudflare()) {
     const cache = await caches.open("chatHistory");

app/lib/chatHistory.ts

@@ -4,7 +4,7 @@ import { getDrizzle } from "./drizzle";
 import { chat, diff, message, section } from "@/schema/chat";
 import { and, asc, eq, exists } from "drizzle-orm";
 import { Auth } from "better-auth";
-import { revalidateTag } from "next/cache";
+import { updateTag } from "next/cache";
 import { isCloudflare } from "./detectCloudflare";
 import { getPagesList, LangId, PagePath, PageSlug, SectionId } from "./docs";
 
@@ -31,7 +31,6 @@ export function cacheKeyForChat(chatId: string) {
 // nextjsのキャッシュのrevalidateはRouteHandlerではなくServerActionから呼ばないと正しく動作しないらしい。
 // https://github.com/vercel/next.js/issues/69064
 // そのためlib/以下の関数では直接revalidateChatを呼ばず、ServerActionの関数から呼ぶようにする。
-// Nextjs 16 に更新したらこれをupdateTag()で置き換える。
 export async function revalidateChat(
   chatId: string,
   userId: string,
@@ -41,8 +40,8 @@ export async function revalidateChat(
     const [lang, page] = pagePath.split("/") as [LangId, PageSlug];
     pagePath = { lang, page };
   }
-  revalidateTag(cacheKeyForChat(chatId));
-  revalidateTag(cacheKeyForPage(pagePath, userId));
+  updateTag(cacheKeyForChat(chatId));
+  updateTag(cacheKeyForPage(pagePath, userId));
   if (isCloudflare()) {
     const cache = await caches.open("chatHistory");
     await cache.delete(cacheKeyForChat(chatId));

app/lib/docs.ts

@@ -196,6 +196,7 @@ async function getLanguageIds(): Promise<LangId[]> {
 }
 
 export async function getPagesList(): Promise<LanguageEntry[]> {
+  "use cache";
   const langIds = await getLanguageIds();
   return await Promise.all(
     langIds.map(async (langId) => {
@@ -254,6 +255,7 @@ export async function getMarkdownSections(
   lang: LangId,
   page: PageSlug
 ): Promise<MarkdownSection[]> {
+  "use cache";
   if (isCloudflare()) {
     const sectionsJson = await readPublicFile(
       `docs/${lang}/${page}/sections.json`

eslint.config.mjs

@@ -1,17 +1,22 @@
-import { dirname } from "path";
-import { fileURLToPath } from "url";
-import { FlatCompat } from "@eslint/eslintrc";
-
-const __filename = fileURLToPath(import.meta.url);
-const __dirname = dirname(__filename);
-
-const compat = new FlatCompat({
-  baseDirectory: __dirname,
-});
+import nextCoreWebVitals from "eslint-config-next/core-web-vitals";
+import nextTypescript from "eslint-config-next/typescript";
+import reactHooks from "eslint-plugin-react-hooks";
 
 const eslintConfig = [
-  ...compat.config({
-    extends: ["next/core-web-vitals", "next/typescript"],
+  {
+    ignores: [
+      ".next/**",
+      "node_modules/**",
+      "public/**",
+      "cloudflare-env.d.ts",
+      "packages/runtime/node_modules/**",
+      "packages/runtime/dist/**",
+    ],
+  },
+  ...nextCoreWebVitals,
+  ...nextTypescript,
+  {
+    plugins: { "react-hooks": reactHooks },
     rules: {
       // Next.jsのデフォルト設定を上書き
       "@typescript-eslint/no-unused-vars": [
@@ -22,8 +27,12 @@ const eslintConfig = [
           ignoreRestSiblings: true,
         },
       ],
+      // react-hooks/refs と react-hooks/set-state-in-effect は Next.js 16 で追加された新しいルールで、
+      // 既存のコードパターンと相性が悪いため無効化する
+      "react-hooks/refs": "off",
+      "react-hooks/set-state-in-effect": "off",
     },
-  }),
+  },
 ];
 
 export default eslintConfig;

next.config.ts

@@ -11,9 +11,6 @@ const nextConfig: NextConfig = {
   experimental: {
     useCache: true,
   },
-  eslint: {
-    ignoreDuringBuilds: true,
-  },
   typescript: {
     ignoreBuildErrors: true,
   },
@@ -45,7 +42,7 @@ const nextConfig: NextConfig = {
       },
     ];
   },
-  webpack: (config, { isServer }) => {
+  webpack: (config) => {
     config.plugins.push(
       new PyodidePlugin({
         // public/ 以下に書き出すと404