Update to latest canary + dynamicIO

app/[page]/page.tsx

@@ -23,7 +23,11 @@ export async function generateMetadata(props: {
   };
 }
 
-export default async function Page(props: { params: Promise<{ page: string }> }) {
+export default async function Page(props: {
+  params: Promise<{ page: string }>;
+}) {
+  'use cache';
+
   const params = await props.params;
   const page = await getPage(params.page);
 
@@ -34,11 +38,14 @@ export default async function Page(props: { params: Promise<{ page: string }> })
       <h1 className="mb-8 text-5xl font-bold">{page.title}</h1>
       <Prose className="mb-8" html={page.body} />
       <p className="text-sm italic">
-        {`This document was last updated on ${new Intl.DateTimeFormat(undefined, {
-          year: 'numeric',
-          month: 'long',
-          day: 'numeric'
-        }).format(new Date(page.updatedAt))}.`}
+        {`This document was last updated on ${new Intl.DateTimeFormat(
+          undefined,
+          {
+            year: 'numeric',
+            month: 'long',
+            day: 'numeric'
+          }
+        ).format(new Date(page.updatedAt))}.`}
       </p>
     </>
   );

app/product/[handle]/page.tsx

@@ -49,7 +49,11 @@ export async function generateMetadata(props: {
   };
 }
 
-export default async function ProductPage(props: { params: Promise<{ handle: string }> }) {
+export default async function ProductPage(props: {
+  params: Promise<{ handle: string }>;
+}) {
+  'use cache';
+
   const params = await props.params;
   const product = await getProduct(params.handle);
 
@@ -103,7 +107,9 @@ export default async function ProductPage(props: { params: Promise<{ handle: str
             </Suspense>
           </div>
         </div>
-        <RelatedProducts id={product.id} />
+        <Suspense fallback={null}>
+          <RelatedProducts id={product.id} />
+        </Suspense>
       </div>
       <Footer />
     </ProductProvider>

app/search/[collection]/page.tsx

@@ -17,7 +17,9 @@ export async function generateMetadata(props: {
   return {
     title: collection.seo?.title || collection.title,
     description:
-      collection.seo?.description || collection.description || `${collection.title} products`
+      collection.seo?.description ||
+      collection.description ||
+      `${collection.title} products`
   };
 }
 
@@ -25,11 +27,18 @@ export default async function CategoryPage(props: {
   params: Promise<{ collection: string }>;
   searchParams?: Promise<{ [key: string]: string | string[] | undefined }>;
 }) {
+  'use cache';
+
   const searchParams = await props.searchParams;
   const params = await props.params;
   const { sort } = searchParams as { [key: string]: string };
-  const { sortKey, reverse } = sorting.find((item) => item.slug === sort) || defaultSort;
-  const products = await getCollectionProducts({ collection: params.collection, sortKey, reverse });
+  const { sortKey, reverse } =
+    sorting.find((item) => item.slug === sort) || defaultSort;
+  const products = await getCollectionProducts({
+    collection: params.collection,
+    sortKey,
+    reverse
+  });
 
   return (
     <section>

components/carousel.tsx

@@ -3,8 +3,12 @@ import Link from 'next/link';
 import { GridTileImage } from './grid/tile';
 
 export async function Carousel() {
+  'use cache';
+
   // Collections that start with `hidden-*` are hidden from the search page.
-  const products = await getCollectionProducts({ collection: 'hidden-homepage-carousel' });
+  const products = await getCollectionProducts({
+    collection: 'hidden-homepage-carousel'
+  });
 
   if (!products?.length) return null;
 
@@ -19,7 +23,10 @@ export async function Carousel() {
             key={`${product.handle}${i}`}
             className="relative aspect-square h-[30vh] max-h-[275px] w-2/3 max-w-[475px] flex-none md:w-1/3"
           >
-            <Link href={`/product/${product.handle}`} className="relative h-full w-full">
+            <Link
+              href={`/product/${product.handle}`}
+              className="relative h-full w-full"
+            >
               <GridTileImage
                 alt={product.title}
                 label={{

components/grid/three-items.tsx

@@ -14,7 +14,11 @@ function ThreeItemGridItem({
 }) {
   return (
     <div
-      className={size === 'full' ? 'md:col-span-4 md:row-span-2' : 'md:col-span-2 md:row-span-1'}
+      className={
+        size === 'full'
+          ? 'md:col-span-4 md:row-span-2'
+          : 'md:col-span-2 md:row-span-1'
+      }
     >
       <Link
         className="relative block aspect-square h-full w-full"
@@ -25,7 +29,9 @@ function ThreeItemGridItem({
           src={item.featuredImage.url}
           fill
           sizes={
-            size === 'full' ? '(min-width: 768px) 66vw, 100vw' : '(min-width: 768px) 33vw, 100vw'
+            size === 'full'
+              ? '(min-width: 768px) 66vw, 100vw'
+              : '(min-width: 768px) 33vw, 100vw'
           }
           priority={priority}
           alt={item.title}
@@ -42,6 +48,8 @@ function ThreeItemGridItem({
 }
 
 export async function ThreeItemGrid() {
+  'use cache';
+
   // Collections that start with `hidden-*` are hidden from the search page.
   const homepageItems = await getCollectionProducts({
     collection: 'hidden-homepage-featured-items'

components/layout/footer.tsx

@@ -8,9 +8,12 @@ import { Suspense } from 'react';
 const { COMPANY_NAME, SITE_NAME } = process.env;
 
 export default async function Footer() {
+  'use cache';
+
   const currentYear = new Date().getFullYear();
   const copyrightDate = 2023 + (currentYear > 2023 ? `-${currentYear}` : '');
-  const skeleton = 'w-full h-6 animate-pulse rounded-sm bg-neutral-200 dark:bg-neutral-700';
+  const skeleton =
+    'w-full h-6 animate-pulse rounded-sm bg-neutral-200 dark:bg-neutral-700';
   const menu = await getMenu('next-js-frontend-footer-menu');
   const copyrightName = COMPANY_NAME || SITE_NAME || '';
 
@@ -18,7 +21,10 @@ export default async function Footer() {
     <footer className="text-sm text-neutral-500 dark:text-neutral-400">
       <div className="mx-auto flex w-full max-w-7xl flex-col gap-6 border-t border-neutral-200 px-6 py-12 text-sm md:flex-row md:gap-12 md:px-4 min-[1320px]:px-0 dark:border-neutral-700">
         <div>
-          <Link className="flex items-center gap-2 text-black md:pt-1 dark:text-white" href="/">
+          <Link
+            className="flex items-center gap-2 text-black md:pt-1 dark:text-white"
+            href="/"
+          >
             <LogoSquare size="sm" />
             <span className="uppercase">{SITE_NAME}</span>
           </Link>
@@ -53,7 +59,10 @@ export default async function Footer() {
         <div className="mx-auto flex w-full max-w-7xl flex-col items-center gap-1 px-4 md:flex-row md:gap-0 md:px-4 min-[1320px]:px-0">
           <p>
             &copy; {copyrightDate} {copyrightName}
-            {copyrightName.length && !copyrightName.endsWith('.') ? '.' : ''} All rights reserved.
+            {copyrightName.length && !copyrightName.endsWith('.')
+              ? '.'
+              : ''}{' '}
+            All rights reserved.
           </p>
           <hr className="mx-4 hidden h-4 w-[1px] border-l border-neutral-400 md:inline-block" />
           <p>

next.config.ts

@@ -1,6 +1,7 @@
 export default {
   experimental: {
     ppr: true,
+    dynamicIO: true,
     inlineCss: true,
     useCache: true
   },

package.json

@@ -9,26 +9,26 @@
     "test": "pnpm prettier:check"
   },
   "dependencies": {
-    "@headlessui/react": "^2.2.0",
+    "@headlessui/react": "^2.2.3",
     "@heroicons/react": "^2.2.0",
     "clsx": "^2.1.1",
-    "geist": "^1.3.1",
-    "next": "15.3.0-canary.13",
-    "react": "19.0.0",
-    "react-dom": "19.0.0",
-    "sonner": "^2.0.1"
+    "geist": "^1.4.2",
+    "next": "15.4.0-canary.31",
+    "react": "19.1.0",
+    "react-dom": "19.1.0",
+    "sonner": "^2.0.3"
   },
   "devDependencies": {
     "@tailwindcss/container-queries": "^0.1.1",
-    "@tailwindcss/postcss": "^4.0.14",
+    "@tailwindcss/postcss": "^4.1.6",
     "@tailwindcss/typography": "^0.5.16",
-    "@types/node": "22.13.10",
-    "@types/react": "19.0.12",
-    "@types/react-dom": "19.0.4",
+    "@types/node": "22.15.17",
+    "@types/react": "19.1.4",
+    "@types/react-dom": "19.1.4",
     "postcss": "^8.5.3",
     "prettier": "3.5.3",
     "prettier-plugin-tailwindcss": "^0.6.11",
-    "tailwindcss": "^4.0.14",
-    "typescript": "5.8.2"
+    "tailwindcss": "^4.1.6",
+    "typescript": "5.8.3"
   }
 }