feat: dynamicIO

next.config.ts

@@ -46,6 +46,7 @@ const nextConfig: NextConfig = {
   experimental: {
     typedRoutes: true,
     authInterrupts: true,
+    dynamicIO: true,
   },
   /* start: otel */
   webpack: (config, { isServer }) => {

package.json

@@ -36,7 +36,7 @@
     "@prisma/client": "6.3.1",
     "@prisma/instrumentation": "6.3.1",
     "clsx": "2.1.1",
-    "next": "15.1.6",
+    "next": "canary",
     "next-auth": "5.0.0-beta.25",
     "react": "19.0.0",
     "react-dom": "19.0.0",

src/app/(private)/me/page.tsx

@@ -1,8 +1,17 @@
 import { notFound } from "next/navigation";
+import { Suspense } from "react";
 import { auth } from "../../_clients/nextAuth";
 import { UpdateMyInfo } from "./_components/UpdateMyInfo";
 
 export default async function Page() {
+  return (
+    <Suspense fallback={<p>loading...</p>}>
+      <ValidateUser />
+    </Suspense>
+  );
+}
+
+async function ValidateUser() {
   const session = await auth();
 
   if (!session?.user.id) {

src/app/(public)/page.tsx

@@ -1,4 +1,5 @@
 import type { Route } from "next";
+import { unstable_cacheTag as cacheTag } from "next/cache";
 import Image from "next/image";
 import Link from "next/link";
 import { Suspense } from "react";
@@ -11,11 +12,11 @@ import { format } from "../_utils/date";
 export default async function Page() {
   return (
     <div className="space-y-5">
-      <Suspense fallback={<p>loading ...</p>}>
+      <Suspense fallback={<p>loading...</p>}>
         <Status />
       </Suspense>
-      <Suspense fallback={<p>loading ...</p>}>
-        <List />
+      <Suspense fallback={<p>loading...</p>}>
+        <ItemList />
       </Suspense>
     </div>
   );
@@ -47,7 +48,11 @@ async function Status() {
   );
 }
 
-async function List() {
+async function ItemList() {
+  "use cache";
+
+  cacheTag("items");
+
   const data = await prisma.item.findMany({
     include: {
       user: true,

src/app/@dialog/(.)create/Content.tsx → src/app/@dialog/(.)create/_components/Form.tsx

@@ -4,12 +4,12 @@ import { zodResolver } from "@hookform/resolvers/zod";
 import { useRouter } from "next/navigation";
 import { useTransition } from "react";
 import { type SubmitHandler, useForm } from "react-hook-form";
-import { create } from "../../_actions/items";
-import { Input } from "../../_components/Input";
-import { type ItemSchema, itemSchema } from "../../_schemas/items";
-import { Dialog } from "../_components/Dialog";
+import { create } from "../../../_actions/items";
+import { Input } from "../../../_components/Input";
+import { type ItemSchema, itemSchema } from "../../../_schemas/items";
+import { Dialog } from "../../_components/Dialog";
 
-export function Content() {
+export function Form() {
   const router = useRouter();
   const [isPending, startTransition] = useTransition();
   const {

src/app/@dialog/(.)create/page.tsx

@@ -1,9 +1,7 @@
-import { Content } from "./Content";
+import { Form } from "./_components/Form";
 
 // bug: https://github.com/vercel/next.js/issues/74128
-export const dynamic = "force-dynamic";
-
 // users who are not logged in cannot reach here due to intercepting routes.
 export default function Page() {
-  return <Content />;
+  return <Form />;
 }

src/app/_actions/items.test.ts

@@ -26,13 +26,13 @@ describe("actions/items", () => {
         success: true,
         data: expected,
       });
-      expect(mock.revalidatePath.mock.calls).toMatchInlineSnapshot(`
-      [
+      expect(mock.revalidateTag.mock.calls).toMatchInlineSnapshot(`
         [
-          "/",
-        ],
-      ]
-    `);
+          [
+            "items",
+          ],
+        ]
+      `);
       expect(await prisma.item.findMany()).toMatchObject([expected]);
     });
 
@@ -83,10 +83,10 @@ describe("actions/items", () => {
       await deleteAll();
       expect(await prisma.item.count()).toBe(0);
 
-      expect(mock.revalidatePath.mock.calls).toMatchInlineSnapshot(`
+      expect(mock.revalidateTag.mock.calls).toMatchInlineSnapshot(`
         [
           [
-            "/",
+            "items",
           ],
         ]
       `);

src/app/_actions/items.ts

@@ -1,14 +1,16 @@
 "use server";
 
 import type { Item } from "@prisma/client";
-import { revalidatePath } from "next/cache";
+import { revalidateTag } from "next/cache";
 import { auth } from "../_clients/nextAuth";
 import { prisma } from "../_clients/prisma";
 import { type ItemSchema, itemSchema } from "../_schemas/items";
 import { getFieldErrors } from "../_utils/zod";
 import type { Result } from "./types";
 
-export async function create(data: ItemSchema): Promise<Result<Item>> {
+export async function create(
+  data: ItemSchema,
+): Promise<Result<Pick<Item, "id" | "userId" | "content">>> {
   const session = await auth();
 
   if (!session?.user?.id) {
@@ -41,11 +43,15 @@ export async function create(data: ItemSchema): Promise<Result<Item>> {
     });
   });
 
-  revalidatePath("/");
+  revalidateTag("items");
 
   return {
     success: true,
-    data: res,
+    data: {
+      id: res.id,
+      userId: res.userId,
+      content: res.content,
+    },
   };
 }
 
@@ -64,5 +70,5 @@ export async function deleteAll() {
     });
   });
 
-  revalidatePath("/");
+  revalidateTag("items");
 }