add PPR to canary test and a dynamic route

next-canary/next.config.ts

@@ -15,6 +15,7 @@ const nextConfig: NextConfig = {
         expire: 0xfffffffe,
       },
     },
+    ppr: 'incremental',
   },
 }
 

next-canary/src/app/dynamic/UserAgent.tsx

@@ -0,0 +1,15 @@
+import {headers} from 'next/headers'
+
+export async function UserAgent() {
+  const headersList = await headers()
+  const userAgent = headersList.get('user-agent')
+
+  return (
+    <div className="bg-theme-button text-theme-button absolute bottom-2 left-2 block rounded text-xs transition duration-1000 ease-in-out">
+      <span className="inline-block py-1 pl-2 pr-0.5">User Agent:</span>
+      <span className="bg-theme text-theme mr-0.5 inline-block rounded-r-sm px-1 py-0.5 tabular-nums transition duration-1000 ease-in-out">
+        {userAgent}
+      </span>
+    </div>
+  )
+}

next-canary/src/app/dynamic/page.tsx

@@ -0,0 +1,47 @@
+import {sanityFetch} from '@/sanity/fetch'
+import {defineQuery} from 'groq'
+import type {Metadata} from 'next'
+import {Suspense} from 'react'
+import {TimeSince} from '../TimeSince'
+import {UserAgent} from './UserAgent'
+
+const DEMO_QUERY = defineQuery(`*[_type == "demo" && slug.current == $slug][0].title`)
+const slug = 'next-canary'
+
+export const experimental_ppr = true
+
+export async function generateMetadata(): Promise<Metadata> {
+  const {data} = await sanityFetch({query: DEMO_QUERY, params: {slug}})
+  return {
+    title: data || 'Next Canary',
+  }
+}
+
+export default async function Home() {
+  const {data, fetchedAt} = await sanityFetch({query: DEMO_QUERY, params: {slug}})
+
+  return (
+    <>
+      <div className="ring-theme relative mx-2 rounded-lg px-2 pb-1 pt-8 ring-1">
+        <h1 className="min-w-64 text-balance text-4xl font-bold leading-tight tracking-tighter md:text-6xl lg:pr-8 lg:text-8xl">
+          {data || 'Next Canary'}
+        </h1>
+        <Suspense>
+          <TimeSince label="page.tsx" since={fetchedAt} />
+        </Suspense>
+      </div>
+      <Suspense
+        fallback={
+          <div className="bg-theme-button text-theme-button absolute bottom-2 left-2 block rounded text-xs transition duration-1000 ease-in-out">
+            <span className="inline-block py-1 pl-2 pr-0.5">User Agent:</span>
+            <span className="bg-theme text-theme mr-0.5 inline-block rounded-r-sm px-1 py-0.5 tabular-nums transition duration-1000 ease-in-out">
+              ...
+            </span>
+          </div>
+        }
+      >
+        <UserAgent />
+      </Suspense>
+    </>
+  )
+}