Add PPR

dashboard/final-example/app/dashboard/layout.tsx

@@ -1,5 +1,7 @@
 import SideNav from '@/app/ui/dashboard/sidenav';
 
+export const experimental_ppr = true;
+
 export default function Layout({ children }: { children: React.ReactNode }) {
   return (
     <div className="flex h-screen flex-col md:flex-row md:overflow-hidden">

dashboard/final-example/app/ui/invoices/create-form.tsx

@@ -9,11 +9,11 @@ import {
   UserCircleIcon,
 } from '@heroicons/react/24/outline';
 import { Button } from '@/app/ui/button';
-import { createInvoice } from '@/app/lib/actions';
+import { createInvoice, State } from '@/app/lib/actions';
 import { useFormState } from 'react-dom';
 
 export default function Form({ customers }: { customers: CustomerField[] }) {
-  const initialState = { message: null, errors: {} };
+  const initialState: State = { message: null, errors: {} };
   const [state, dispatch] = useFormState(createInvoice, initialState);
 
   return (

dashboard/final-example/app/ui/invoices/edit-form.tsx

@@ -9,7 +9,7 @@ import {
 } from '@heroicons/react/24/outline';
 import Link from 'next/link';
 import { Button } from '@/app/ui/button';
-import { updateInvoice } from '@/app/lib/actions';
+import { updateInvoice, State } from '@/app/lib/actions';
 import { useFormState } from 'react-dom';
 
 export default function EditInvoiceForm({
@@ -19,7 +19,7 @@ export default function EditInvoiceForm({
   invoice: InvoiceForm;
   customers: CustomerField[];
 }) {
-  const initialState = { message: null, errors: {} };
+  const initialState: State = { message: null, errors: {} };
   const updateInvoiceWithId = updateInvoice.bind(null, invoice.id);
   const [state, dispatch] = useFormState(updateInvoiceWithId, initialState);
 

dashboard/final-example/next.config.mjs

@@ -0,0 +1,9 @@
+/** @type {import('next').NextConfig} */
+
+const nextConfig = {
+  experimental: {
+    ppr: 'incremental',
+  },
+};
+
+export default nextConfig;

dashboard/final-example/package.json

@@ -17,7 +17,7 @@
     "autoprefixer": "10.4.15",
     "bcrypt": "^5.1.1",
     "clsx": "^2.0.0",
-    "next": "15.0.0-rc.0",
+    "next": "15.0.0-canary.28",
     "next-auth": "^5.0.0-beta.4",
     "postcss": "8.4.31",
     "react": "19.0.0-rc-6230622a1a-20240610",

dashboard/final-example/tsconfig.json

@@ -1,6 +1,6 @@
 {
   "compilerOptions": {
-    "target": "es5",
+    "target": "ES2017",
     "lib": ["dom", "dom.iterable", "esnext"],
     "allowJs": true,
     "skipLibCheck": true,

dashboard/final-example/next.config.js → dashboard/starter-example/next.config.mjs

@@ -1,4 +1,4 @@
 /** @type {import('next').NextConfig} */
 const nextConfig = {};
 
-module.exports = nextConfig;
+export default nextConfig;

dashboard/starter-example/package.json

@@ -15,7 +15,7 @@
     "autoprefixer": "10.4.15",
     "bcrypt": "^5.1.1",
     "clsx": "^2.0.0",
-    "next": "15.0.0-rc.0",
+    "next": "15.0.0-canary.28",
     "postcss": "8.4.31",
     "react": "19.0.0-rc-6230622a1a-20240610",
     "react-dom": "19.0.0-rc-6230622a1a-20240610",