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]>
56 lines
1.8 KiB
TypeScript
56 lines
1.8 KiB
TypeScript
import { DeployButton } from "@/components/deploy-button";
|
|
import { EnvVarWarning } from "@/components/env-var-warning";
|
|
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,
|
|
}: {
|
|
children: React.ReactNode;
|
|
}) {
|
|
return (
|
|
<main className="min-h-screen flex flex-col items-center">
|
|
<div className="flex-1 w-full flex flex-col gap-20 items-center">
|
|
<nav className="w-full flex justify-center border-b border-b-foreground/10 h-16">
|
|
<div className="w-full max-w-5xl flex justify-between items-center p-3 px-5 text-sm">
|
|
<div className="flex gap-5 items-center font-semibold">
|
|
<Link href={"/"}>Next.js Supabase Starter</Link>
|
|
<div className="flex items-center gap-2">
|
|
<DeployButton />
|
|
</div>
|
|
</div>
|
|
{!hasEnvVars ? (
|
|
<EnvVarWarning />
|
|
) : (
|
|
<Suspense>
|
|
<AuthButton />
|
|
</Suspense>
|
|
)}
|
|
</div>
|
|
</nav>
|
|
<div className="flex-1 flex flex-col gap-20 max-w-5xl p-5">
|
|
{children}
|
|
</div>
|
|
|
|
<footer className="w-full flex items-center justify-center border-t mx-auto text-center text-xs gap-8 py-16">
|
|
<p>
|
|
Powered by{" "}
|
|
<a
|
|
href="https://supabase.com/?utm_source=create-next-app&utm_medium=template&utm_term=nextjs"
|
|
target="_blank"
|
|
className="font-bold hover:underline"
|
|
rel="noreferrer"
|
|
>
|
|
Supabase
|
|
</a>
|
|
</p>
|
|
<ThemeSwitcher />
|
|
</footer>
|
|
</div>
|
|
</main>
|
|
);
|
|
}
|