feat: introduce dynamicIO

Author: hiroppy

next.config.ts

@@ -1,13 +1,13 @@
-import type { NextConfig } from 'next';
+import type { NextConfig } from "next";
 
 const nextConfig: NextConfig = {
   // logging: {
   //   fetches: {
   //     fullUrl: true,
   //   },
   // },
-  transpilePackages: ["shiki"],
   experimental: {
+    dynamicIO: true,
     taint: true,
     // typedRoutes: true,
   },

package.json

@@ -19,7 +19,7 @@
     "@shikijs/transformers": "^1.22.2",
     "algoliasearch": "^4.24.0",
     "instantsearch.js": "^4.75.3",
-    "next": "15.0.1",
+    "next": "canary",
     "react": "^18.3.1",
     "react-dom": "^18.3.1",
     "react-instantsearch": "^7.13.6",

pnpm-lock.yaml

@@ -11,7 +11,7 @@ self.addEventListener("fetch", (e) => {
     e.respondWith(
       (async () => {
         const res = await fetch(e.request);
-        const createdAt = Date.now();
+        const createdAt = performance.now();
 
         // res.text() fails is when trying to read the same response stream twice.
         const clone = res.clone();

public/service-worker.js

@@ -5,12 +5,12 @@ import { Result } from "@/app/_components/search/result";
 import { SearchBox } from "@/app/_components/search/searchBox";
 import { client } from "@/app/_utils/algolia";
 import { Suspense, useState } from "react";
-import { Configure } from "react-instantsearch";
-import { InstantSearchNext } from "react-instantsearch-nextjs";
+// TODO: need to upgrade below
+// Error: Route "/(.)search" used `headers().get('x-nonce')`. `headers()` should be awaited before using its value.
+// import { Configure } from "react-instantsearch";
+// import { InstantSearchNext } from "react-instantsearch-nextjs";
 import { meta } from "../examples/data";
 
-export const dynamic = "force-dynamic";
-
 export default function Page() {
   const [tag, setTag] = useState<string | null>(null);
 
@@ -42,7 +42,7 @@ export default function Page() {
         ))}
       </ul>
       <div className="flex-1 w-full md:w-0">
-        <Suspense>
+        {/* <Suspense>
           <InstantSearchNext indexName="examples" searchClient={client}>
             <Configure tagFilters={tag ?? undefined} />
             <div className="text-gray-200 flex flex-col gap-4">
@@ -55,7 +55,7 @@ export default function Page() {
               </footer>
             </div>
           </InstantSearchNext>
-        </Suspense>
+        </Suspense> */}
       </div>
     </div>
   );

src/app/search/page.tsx renamed to src/app/_search/page.tsx

@@ -1,9 +1,7 @@
 import { NextResponse } from "next/server";
 
-export const revalidate = 0;
-
 export async function GET() {
   return NextResponse.json({
-    now: Date.now(),
+    now: performance.now(),
   });
 }