mirror of
https://github.com/hanzoai/next.js.git
synced 2026-09-24 17:00:51 +00:00
fc4f062ba9
### What? Upgrade with-supabase example to be compatible with Next.js 16 ### Why? 1. Users get console warnings about middleware vs proxy 2. Enabling Cache Components config results in build errors for async behaviour outside Suspense boundary 3. Turbopack flag is default and therefore, no longer necessary on `npm run dev` ### How? 1. Renamed all instances of `middleware` to `proxy` 2. Wraped async behaviour in Suspense boundaries 3. Removed --turbopack flag from `npm run dev` --------- Co-authored-by: JJ Kasper <[email protected]>
52 lines
1.2 KiB
TypeScript
52 lines
1.2 KiB
TypeScript
import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card";
|
|
import { Suspense } from "react";
|
|
|
|
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">
|
|
<div className="flex flex-col gap-6">
|
|
<Card>
|
|
<CardHeader>
|
|
<CardTitle className="text-2xl">
|
|
Sorry, something went wrong.
|
|
</CardTitle>
|
|
</CardHeader>
|
|
<CardContent>
|
|
<Suspense>
|
|
<ErrorContent searchParams={searchParams} />
|
|
</Suspense>
|
|
</CardContent>
|
|
</Card>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
);
|
|
}
|