import { createServerComponentClient } from '@supabase/auth-helpers-nextjs' import { cookies } from 'next/headers' import Link from 'next/link' import LogoutButton from '../components/LogoutButton' import SupabaseLogo from '../components/SupabaseLogo' import NextJsLogo from '../components/NextJsLogo' export const dynamic = 'force-dynamic' const resources = [ { title: 'Cookie-based Auth and the Next.js App Router', subtitle: 'This free course by Jon Meyers, shows you how to configure Supabase Auth to use cookies, and steps through some common patterns.', url: 'https://youtube.com/playlist?list=PL5S4mPUpp4OtMhpnp93EFSo42iQ40XjbF', icon: 'M7 4V20M17 4V20M3 8H7M17 8H21M3 12H21M3 16H7M17 16H21M4 20H20C20.5523 20 21 19.5523 21 19V5C21 4.44772 20.5523 4 20 4H4C3.44772 4 3 4.44772 3 5V19C3 19.5523 3.44772 20 4 20Z', }, { title: 'Supabase Next.js App Router Example', subtitle: 'Want to see a code example containing some common patterns with Next.js and Supabase? Check out this repo!', url: 'https://github.com/supabase/supabase/tree/master/examples/auth/nextjs', icon: 'M10 20L14 4M18 8L22 12L18 16M6 16L2 12L6 8', }, { title: 'Supabase Auth Helpers Docs', subtitle: 'This template has configured Supabase Auth to use cookies for you, but the docs are a great place to learn more.', url: 'https://supabase.com/docs/guides/auth/auth-helpers/nextjs', icon: 'M12 6.25278V19.2528M12 6.25278C10.8321 5.47686 9.24649 5 7.5 5C5.75351 5 4.16789 5.47686 3 6.25278V19.2528C4.16789 18.4769 5.75351 18 7.5 18C9.24649 18 10.8321 18.4769 12 19.2528M12 6.25278C13.1679 5.47686 14.7535 5 16.5 5C18.2465 5 19.8321 5.47686 21 6.25278V19.2528C19.8321 18.4769 18.2465 18 16.5 18C14.7535 18 13.1679 18.4769 12 19.2528', }, ] const examples = [ { type: 'Client Components', src: 'app/_examples/client-component/page.tsx' }, { type: 'Server Components', src: 'app/_examples/server-component/page.tsx' }, { type: 'Server Actions', src: 'app/_examples/server-action/page.tsx' }, { type: 'Route Handlers', src: 'app/_examples/route-handler.ts' }, { type: 'Middleware', src: 'app/middleware.ts' }, { type: 'Protected Routes', src: 'app/_examples/protected/page.tsx' }, ] export default async function Index() { const supabase = createServerComponentClient({ cookies }) const { data: { user }, } = await supabase.auth.getUser() return (

Supabase and Next.js Starter Template

The fastest way to start building apps with{' '} Supabase and Next.js

Get started by editing app/page.tsx

Everything you need to get started

{resources.map(({ title, subtitle, url, icon }) => (

{title}

{subtitle}

))}

Examples

Look in the _examples folder to see how to create a Supabase client in all the different contexts.

{examples.map(({ type, src }) => (
{type}
{src}
))}

Powered by{' '} Supabase

) }