Chore: Update with-supabase example to Next.js 16

examples/with-supabase/README.md

@@ -22,7 +22,7 @@
 - Works across the entire [Next.js](https://nextjs.org) stack
   - App Router
   - Pages Router
-  - Middleware
+  - Proxy
   - Client
   - Server
   - It just works!

examples/with-supabase/app/auth/error/page.tsx

@@ -1,12 +1,33 @@
 import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card";
+import { Suspense } from "react";
 
-export default async function Page({
+async function ErrorContent({
   searchParams,
 }: {
   searchParams: Promise<{ error: string }>;
 }) {
   const params = await searchParams;
 
+  return (
+    <>
+      {params?.error ? (
+        <p className="text-sm text-muted-foreground">
+          Code error: {params.error}
+        </p>
+      ) : (
+        <p className="text-sm text-muted-foreground">
+          An unspecified error occurred.
+        </p>
+      )}
+    </>
+  );
+}
+
+export default function Page({
+  searchParams,
+}: {
+  searchParams: Promise<{ error: string }>;
+}) {
   return (
     <div className="flex min-h-svh w-full items-center justify-center p-6 md:p-10">
       <div className="w-full max-w-sm">
@@ -18,15 +39,9 @@ export default async function Page({
               </CardTitle>
             </CardHeader>
             <CardContent>
-              {params?.error ? (
-                <p className="text-sm text-muted-foreground">
-                  Code error: {params.error}
-                </p>
-              ) : (
-                <p className="text-sm text-muted-foreground">
-                  An unspecified error occurred.
-                </p>
-              )}
+              <Suspense>
+                <ErrorContent searchParams={searchParams} />
+              </Suspense>
             </CardContent>
           </Card>
         </div>

examples/with-supabase/app/page.tsx

@@ -7,6 +7,7 @@ import { ConnectSupabaseSteps } from "@/components/tutorial/connect-supabase-ste
 import { SignUpUserSteps } from "@/components/tutorial/sign-up-user-steps";
 import { hasEnvVars } from "@/lib/utils";
 import Link from "next/link";
+import { Suspense } from "react";
 
 export default function Home() {
   return (
@@ -20,7 +21,13 @@ export default function Home() {
                 <DeployButton />
               </div>
             </div>
-            {!hasEnvVars ? <EnvVarWarning /> : <AuthButton />}
+            {!hasEnvVars ? (
+              <EnvVarWarning />
+            ) : (
+              <Suspense>
+                <AuthButton />
+              </Suspense>
+            )}
           </div>
         </nav>
         <div className="flex-1 flex flex-col gap-20 max-w-5xl p-5">

examples/with-supabase/app/protected/layout.tsx

@@ -4,6 +4,7 @@ import { AuthButton } from "@/components/auth-button";
 import { ThemeSwitcher } from "@/components/theme-switcher";
 import { hasEnvVars } from "@/lib/utils";
 import Link from "next/link";
+import { Suspense } from "react";
 
 export default function ProtectedLayout({
   children,
@@ -21,7 +22,13 @@ export default function ProtectedLayout({
                 <DeployButton />
               </div>
             </div>
-            {!hasEnvVars ? <EnvVarWarning /> : <AuthButton />}
+            {!hasEnvVars ? (
+              <EnvVarWarning />
+            ) : (
+              <Suspense>
+                <AuthButton />
+              </Suspense>
+            )}
           </div>
         </nav>
         <div className="flex-1 flex flex-col gap-20 max-w-5xl p-5">

examples/with-supabase/app/protected/page.tsx

@@ -3,15 +3,20 @@ import { redirect } from "next/navigation";
 import { createClient } from "@/lib/supabase/server";
 import { InfoIcon } from "lucide-react";
 import { FetchDataSteps } from "@/components/tutorial/fetch-data-steps";
+import { Suspense } from "react";
 
-export default async function ProtectedPage() {
+async function UserDetails() {
   const supabase = await createClient();
-
   const { data, error } = await supabase.auth.getClaims();
+
   if (error || !data?.claims) {
     redirect("/auth/login");
   }
 
+  return JSON.stringify(data.claims, null, 2);
+}
+
+export default function ProtectedPage() {
   return (
     <div className="flex-1 w-full flex flex-col gap-12">
       <div className="w-full">
@@ -24,7 +29,9 @@ export default async function ProtectedPage() {
       <div className="flex flex-col gap-2 items-start">
         <h2 className="font-bold text-2xl mb-4">Your user details</h2>
         <pre className="text-xs font-mono p-3 rounded border max-h-32 overflow-auto">
-          {JSON.stringify(data.claims, null, 2)}
+          <Suspense>
+            <UserDetails />
+          </Suspense>
         </pre>
       </div>
       <div>

examples/with-supabase/lib/supabase/middleware.ts → examples/with-supabase/lib/supabase/proxy.ts

@@ -7,7 +7,7 @@ export async function updateSession(request: NextRequest) {
     request,
   });
 
-  // If the env vars are not set, skip middleware check. You can remove this
+  // If the env vars are not set, skip proxy check. You can remove this
   // once you setup the project.
   if (!hasEnvVars) {
     return supabaseResponse;

examples/with-supabase/lib/supabase/server.ts

@@ -24,7 +24,7 @@ export async function createClient() {
             );
           } catch {
             // The `setAll` method was called from a Server Component.
-            // This can be ignored if you have middleware refreshing
+            // This can be ignored if you have proxy refreshing
             // user sessions.
           }
         },

examples/with-supabase/next.config.ts

@@ -1,7 +1,7 @@
 import type { NextConfig } from "next";
 
 const nextConfig: NextConfig = {
-  /* config options here */
+  cacheComponents: true,
 };
 
 export default nextConfig;

examples/with-supabase/package.json

@@ -1,7 +1,7 @@
 {
   "private": true,
   "scripts": {
-    "dev": "next dev --turbopack",
+    "dev": "next dev",
     "build": "next build",
     "start": "next start",
     "lint": "eslint ."

examples/with-supabase/middleware.ts → examples/with-supabase/proxy.ts

@@ -1,7 +1,7 @@
-import { updateSession } from "@/lib/supabase/middleware";
+import { updateSession } from "@/lib/supabase/proxy";
 import { type NextRequest } from "next/server";
 
-export async function middleware(request: NextRequest) {
+export async function proxy(request: NextRequest) {
   return await updateSession(request);
 }
 

examples/with-supabase/tsconfig.json

@@ -23,6 +23,12 @@
       "@/*": ["./*"]
     }
   },
-  "include": ["next-env.d.ts", "**/*.ts", "**/*.tsx", ".next/types/**/*.ts"],
+  "include": [
+    "next-env.d.ts",
+    "**/*.ts",
+    "**/*.tsx",
+    ".next/types/**/*.ts",
+    ".next/dev/types/**/*.ts"
+  ],
   "exclude": ["node_modules"]
 }