mirror of
https://github.com/supabase/supabase.git
synced 2026-06-13 01:39:53 +08:00
1a863a3fdf
## I have read the [CONTRIBUTING.md](https://github.com/supabase/supabase/blob/master/CONTRIBUTING.md) file. YES <!-- This is an auto-generated comment: release notes by coderabbit.ai --> ## Summary by CodeRabbit * **Documentation** * Updated navigation links in the getting started guide to direct users to the correct documentation pages. <!-- end of auto-generated comment: release notes by coderabbit.ai -->
440 lines
14 KiB
Plaintext
440 lines
14 KiB
Plaintext
---
|
|
id: 'getting-started'
|
|
title: 'Getting Started'
|
|
description: 'Resources for getting started with Supabase.'
|
|
hideToc: true
|
|
---
|
|
|
|
<div className="flex flex-col gap-12 my-12">
|
|
|
|
<div>
|
|
|
|
<div className="grid grid-cols-12 gap-6 not-prose">
|
|
<Link href="/guides/ai-tools" className="col-span-12 md:col-span-4" passHref>
|
|
<GlassPanel
|
|
title="Build with AI tools"
|
|
hasLightIcon={true}
|
|
background={false}
|
|
showIconBg={true}
|
|
>
|
|
Develop with Supabase AI-first using plugins, MCP, and skills.
|
|
</GlassPanel>
|
|
</Link>
|
|
<Link href="/guides/getting-started/api-keys" className="col-span-12 md:col-span-4" passHref>
|
|
<GlassPanel title="API Keys" hasLightIcon={true} background={false} showIconBg={true}>
|
|
Learn about the different API keys in Supabase and how to use them.
|
|
</GlassPanel>
|
|
</Link>
|
|
<Link href="/guides/local-development" className="col-span-12 md:col-span-4" passHref>
|
|
<GlassPanel title="Local Development" hasLightIcon={true} background={false} showIconBg={true}>
|
|
Use the Supabase CLI to develop locally and collaborate between teams.
|
|
</GlassPanel>
|
|
</Link>
|
|
</div>
|
|
|
|
</div>
|
|
|
|
</div>
|
|
|
|
### Use cases
|
|
|
|
<div className="grid lg:grid-cols-12 gap-6 not-prose">
|
|
<Link href="/guides/ai#examples" passHref className="col-span-4">
|
|
<GlassPanel
|
|
title="AI, Vectors, and embeddings"
|
|
span="col-span-6"
|
|
background={false}
|
|
icon="/docs/img/icons/openai_logo"
|
|
hasLightIcon={true}
|
|
>
|
|
Build AI-enabled applications using our Vector toolkit.
|
|
</GlassPanel>
|
|
</Link>
|
|
<Link
|
|
href="https://github.com/vercel/nextjs-subscription-payments#nextjs-subscription-payments-starter"
|
|
passHref
|
|
className="col-span-4"
|
|
>
|
|
<GlassPanel
|
|
title="Subscription Payments (SaaS)"
|
|
span="col-span-6"
|
|
background={false}
|
|
icon="/docs/img/icons/nextjs-icon"
|
|
>
|
|
Clone, deploy, and fully customize a SaaS subscription application with Next.js.
|
|
</GlassPanel>
|
|
</Link>
|
|
<Link
|
|
href="https://github.com/supabase-community/partner-gallery-example#supabase-partner-gallery-example"
|
|
passHref
|
|
className="col-span-4"
|
|
>
|
|
<GlassPanel
|
|
title="Partner Gallery"
|
|
span="col-span-6"
|
|
background={false}
|
|
icon="/docs/img/icons/nextjs-icon"
|
|
>
|
|
Postgres full-text search, image storage, and more.
|
|
</GlassPanel>
|
|
</Link>
|
|
</div>
|
|
|
|
### Framework quickstarts
|
|
|
|
<$Show if="docs:framework_quickstarts">
|
|
|
|
<div className="grid lg:grid-cols-12 gap-6 not-prose">
|
|
<Link href="/guides/getting-started/quickstarts/reactjs" passHref className="col-span-4">
|
|
<GlassPanel
|
|
title="React"
|
|
span="col-span-6"
|
|
background={false}
|
|
icon="/docs/img/icons/react-icon"
|
|
>
|
|
Learn how to create a Supabase project, add some sample data to your database, and query the
|
|
data from a React app.
|
|
</GlassPanel>
|
|
</Link>
|
|
<Link href="/guides/getting-started/quickstarts/nextjs" passHref className="col-span-4">
|
|
<GlassPanel
|
|
title="Next.js"
|
|
span="col-span-6"
|
|
background={false}
|
|
icon="/docs/img/icons/nextjs-icon"
|
|
hasLightIcon={true}
|
|
>
|
|
Learn how to create a Supabase project, add some sample data to your database, and query the
|
|
data from a Next.js app.
|
|
</GlassPanel>
|
|
</Link>
|
|
<Link href="/guides/getting-started/quickstarts/nuxtjs" passHref className="col-span-4">
|
|
<GlassPanel title="Nuxt" span="col-span-6" background={false} icon="/docs/img/icons/nuxt-icon">
|
|
Learn how to create a Supabase project, add some sample data to your database, and query the
|
|
data from a Nuxt app.
|
|
</GlassPanel>
|
|
</Link>
|
|
<Link href="/guides/getting-started/quickstarts/hono" passHref className="col-span-4">
|
|
<GlassPanel title="Hono" span="col-span-6" background={false} icon="/docs/img/icons/hono-icon">
|
|
Learn how to create a Supabase project, add some sample data to your database, secure it with
|
|
auth, and query the data from a Hono app.
|
|
</GlassPanel>
|
|
</Link>
|
|
<Link href="/guides/getting-started/quickstarts/redwoodjs" passHref className="col-span-4">
|
|
<GlassPanel
|
|
title="RedwoodJS"
|
|
span="col-span-6"
|
|
background={false}
|
|
icon="/docs/img/icons/redwood-icon"
|
|
>
|
|
Learn how to create a Supabase project, add some sample data to your database using Prisma
|
|
migration and seeds, and query the data from a RedwoodJS app.
|
|
</GlassPanel>
|
|
</Link>
|
|
<$Show if="sdk:dart">
|
|
<Link href="/guides/getting-started/quickstarts/flutter" passHref className="col-span-4">
|
|
<GlassPanel
|
|
title="Flutter"
|
|
span="col-span-6"
|
|
background={false}
|
|
icon="/docs/img/icons/flutter-icon"
|
|
>
|
|
Learn how to create a Supabase project, add some sample data to your database, and query the
|
|
data from a Flutter app.
|
|
</GlassPanel>
|
|
</Link>
|
|
</$Show>
|
|
<$Show if="sdk:swift">
|
|
<Link href="/guides/getting-started/quickstarts/ios-swiftui" passHref className="col-span-4">
|
|
<GlassPanel
|
|
title="iOS SwiftUI"
|
|
span="col-span-6"
|
|
background={false}
|
|
icon="/docs/img/icons/swift-icon"
|
|
>
|
|
Learn how to create a Supabase project, add some sample data to your database, and query the
|
|
data from an iOS app.
|
|
</GlassPanel>
|
|
</Link>
|
|
</$Show>
|
|
<$Show if="sdk:kotlin">
|
|
<Link href="/guides/getting-started/quickstarts/kotlin" passHref className="col-span-4">
|
|
<GlassPanel
|
|
title="Android Kotlin"
|
|
span="col-span-6"
|
|
background={false}
|
|
icon="/docs/img/icons/kotlin-icon"
|
|
>
|
|
Learn how to create a Supabase project, add some sample data to your database, and query the
|
|
data from an Android Kotlin app.
|
|
</GlassPanel>
|
|
</Link>
|
|
</$Show>
|
|
<Link href="/guides/getting-started/quickstarts/sveltekit" passHref className="col-span-4">
|
|
<GlassPanel
|
|
title="SvelteKit"
|
|
span="col-span-6"
|
|
background={false}
|
|
icon="/docs/img/icons/svelte-icon"
|
|
>
|
|
Learn how to create a Supabase project, add some sample data to your database, and query the
|
|
data from a SvelteKit app.
|
|
</GlassPanel>
|
|
</Link>
|
|
<Link href="/guides/getting-started/quickstarts/solidjs" passHref className="col-span-4">
|
|
<GlassPanel
|
|
title="SolidJS"
|
|
span="col-span-6"
|
|
background={false}
|
|
icon="/docs/img/icons/solidjs-icon"
|
|
>
|
|
Learn how to create a Supabase project, add some sample data to your database, and query the
|
|
data from a SolidJS app.
|
|
</GlassPanel>
|
|
</Link>
|
|
<Link href="/guides/getting-started/quickstarts/vue" passHref className="col-span-4">
|
|
<GlassPanel title="Vue" span="col-span-6" background={false} icon="/docs/img/icons/vuejs-icon">
|
|
Learn how to create a Supabase project, add some sample data to your database, and query the
|
|
data from a Vue app.
|
|
</GlassPanel>
|
|
</Link>
|
|
<Link href="/guides/getting-started/quickstarts/tanstack" passHref className="col-span-4">
|
|
<GlassPanel
|
|
title="TanStack Start"
|
|
span="col-span-6"
|
|
background={false}
|
|
icon="/docs/img/icons/tanstack-icon"
|
|
hasLightIcon={true}
|
|
>
|
|
Learn how to create a Supabase project, add some sample data to your database, and query the
|
|
data from a TanStack Start app.
|
|
</GlassPanel>
|
|
</Link>
|
|
<Link href="/guides/getting-started/quickstarts/refine" passHref className="col-span-4">
|
|
<GlassPanel
|
|
title="Refine"
|
|
span="col-span-6"
|
|
background={false}
|
|
icon="/docs/img/icons/refine-icon"
|
|
>
|
|
Learn how to create a Supabase project, add some sample data to your database, and query the
|
|
data from a Refine app.
|
|
</GlassPanel>
|
|
</Link>
|
|
</div>
|
|
|
|
</$Show>
|
|
|
|
<$Show if="!quickstarts:hide_nimbus">
|
|
|
|
<$Partial path="quickstart_nimbus.mdx" />
|
|
|
|
</$Show>
|
|
|
|
<$Show if="docs:web_apps">
|
|
|
|
### Web app demos
|
|
|
|
<div className="grid lg:grid-cols-12 gap-6 not-prose">
|
|
<Link href="/guides/getting-started/tutorials/with-nextjs" passHref className="col-span-4">
|
|
<GlassPanel
|
|
title="Next.js"
|
|
span="col-span-6"
|
|
background={false}
|
|
icon="/docs/img/icons/nextjs-icon"
|
|
hasLightIcon={true}
|
|
>
|
|
Learn how to build a user management app with Next.js and Supabase Database, Auth, and Storage functionality.
|
|
</GlassPanel>
|
|
</Link>
|
|
<Link href="/guides/getting-started/tutorials/with-react" passHref className="col-span-4">
|
|
<GlassPanel
|
|
title="React"
|
|
span="col-span-6"
|
|
background={false}
|
|
icon="/docs/img/icons/react-icon"
|
|
>
|
|
Learn how to build a user management app with React and Supabase Database, Auth, and Storage functionality.
|
|
</GlassPanel>
|
|
</Link>
|
|
<Link href="/guides/getting-started/tutorials/with-vue-3" passHref className="col-span-4">
|
|
<GlassPanel
|
|
title="Vue 3"
|
|
span="col-span-6"
|
|
background={false}
|
|
icon="/docs/img/icons/vuejs-icon"
|
|
>
|
|
Learn how to build a user management app with Vue 3 and Supabase Database, Auth, and Storage functionality.
|
|
</GlassPanel>
|
|
</Link>
|
|
<Link href="/guides/getting-started/tutorials/with-nuxt-3" passHref className="col-span-4">
|
|
<GlassPanel
|
|
title="Nuxt 3"
|
|
span="col-span-6"
|
|
background={false}
|
|
icon="/docs/img/icons/nuxt-icon"
|
|
>
|
|
Learn how to build a user management app with Nuxt 3 and Supabase Database, Auth, and Storage functionality.
|
|
</GlassPanel>
|
|
</Link>
|
|
<Link href="/guides/getting-started/tutorials/with-angular" passHref className="col-span-4">
|
|
<GlassPanel
|
|
title="Angular"
|
|
span="col-span-6"
|
|
background={false}
|
|
icon="/docs/img/icons/angular-icon"
|
|
>
|
|
Learn how to build a user management app with Angular and Supabase Database, Auth, and Storage functionality.
|
|
</GlassPanel>
|
|
</Link>
|
|
<Link href="/guides/getting-started/tutorials/with-redwoodjs" passHref className="col-span-4">
|
|
<GlassPanel
|
|
title="RedwoodJS"
|
|
span="col-span-6"
|
|
background={false}
|
|
icon="/docs/img/icons/redwood-icon"
|
|
>
|
|
Learn how to build a user management app with RedwoodJS and Supabase Database, Auth, and Storage functionality.
|
|
</GlassPanel>
|
|
</Link>
|
|
<Link href="/guides/getting-started/tutorials/with-svelte" passHref className="col-span-4">
|
|
<GlassPanel
|
|
title="Svelte"
|
|
span="col-span-6"
|
|
background={false}
|
|
icon="/docs/img/icons/svelte-icon"
|
|
>
|
|
Learn how to build a user management app with Svelte and Supabase Database, Auth, and Storage functionality.
|
|
</GlassPanel>
|
|
</Link>
|
|
<Link href="/guides/getting-started/tutorials/with-sveltekit" passHref className="col-span-4">
|
|
<GlassPanel
|
|
title="SvelteKit"
|
|
span="col-span-6"
|
|
background={false}
|
|
icon="/docs/img/icons/svelte-icon"
|
|
>
|
|
Learn how to build a user management app with SvelteKit and Supabase Database, Auth, and Storage functionality.
|
|
</GlassPanel>
|
|
</Link>
|
|
<Link href="/guides/getting-started/tutorials/with-refine" passHref className="col-span-4">
|
|
<GlassPanel
|
|
title="Refine"
|
|
span="col-span-6"
|
|
background={false}
|
|
icon="/docs/img/icons/refine-icon"
|
|
>
|
|
Learn how to build a user management app with Refine and Supabase Database, Auth, and Storage functionality.
|
|
</GlassPanel>
|
|
</Link>
|
|
</div>
|
|
</$Show>
|
|
|
|
<$Show if="docs:mobile_tutorials">
|
|
|
|
### Mobile tutorials
|
|
|
|
<div className="grid lg:grid-cols-12 gap-6 not-prose">
|
|
<$Show if="sdk:dart">
|
|
<Link href="/guides/getting-started/tutorials/with-flutter" passHref className="col-span-4">
|
|
<GlassPanel
|
|
title="Flutter"
|
|
span="col-span-6"
|
|
background={false}
|
|
icon="/docs/img/icons/flutter-icon"
|
|
>
|
|
Learn how to build a user management app with Flutter and Supabase Database, Auth, and Storage functionality.
|
|
</GlassPanel>
|
|
</Link>
|
|
</$Show>
|
|
<Link
|
|
href="/guides/getting-started/tutorials/with-expo-react-native"
|
|
passHref
|
|
className="col-span-4"
|
|
>
|
|
<GlassPanel
|
|
title="Expo React Native"
|
|
span="col-span-6"
|
|
background={false}
|
|
icon="/docs/img/icons/expo-icon"
|
|
hasLightIcon={true}
|
|
>
|
|
Learn how to build a user management app with Expo React Native and Supabase Database, Auth, and Storage functionality.
|
|
</GlassPanel>
|
|
</Link>
|
|
<Link
|
|
href="/guides/getting-started/tutorials/with-expo-react-native-social-auth"
|
|
passHref
|
|
className="col-span-4"
|
|
>
|
|
<GlassPanel
|
|
title="Expo React Native Social Auth"
|
|
span="col-span-6"
|
|
background={false}
|
|
icon="/docs/img/icons/expo-icon"
|
|
hasLightIcon={true}
|
|
>
|
|
Learn how to implement social authentication in an app with Expo React Native and Supabase Database and Auth functionality.
|
|
</GlassPanel>
|
|
</Link>
|
|
<$Show if="sdk:kotlin">
|
|
<Link href="/guides/getting-started/tutorials/with-kotlin" passHref className="col-span-4">
|
|
<GlassPanel
|
|
title="Android Kotlin"
|
|
span="col-span-6"
|
|
background={false}
|
|
icon="/docs/img/icons/kotlin-icon"
|
|
>
|
|
Learn how to build a product management app with Android and Supabase Database, Auth, and Storage functionality.
|
|
</GlassPanel>
|
|
</Link>
|
|
</$Show>
|
|
<$Show if="sdk:swift">
|
|
<Link href="/guides/getting-started/tutorials/with-swift" passHref className="col-span-4">
|
|
<GlassPanel
|
|
title="iOS Swift"
|
|
span="col-span-6"
|
|
background={false}
|
|
icon="/docs/img/icons/swift-icon"
|
|
>
|
|
Learn how to build a user management app with iOS and Supabase Database, Auth, and Storage functionality.
|
|
</GlassPanel>
|
|
</Link>
|
|
</$Show>
|
|
<Link href="/guides/getting-started/tutorials/with-ionic-react" passHref className="col-span-4">
|
|
<GlassPanel
|
|
title="Ionic React"
|
|
span="col-span-6"
|
|
background={false}
|
|
icon="/docs/img/icons/ionic-icon"
|
|
>
|
|
Learn how to build a user management app with Ionic React and Supabase Database, Auth, and Storage functionality.
|
|
</GlassPanel>
|
|
</Link>
|
|
<Link href="/guides/getting-started/tutorials/with-ionic-vue" passHref className="col-span-4">
|
|
<GlassPanel
|
|
title="Ionic Vue"
|
|
span="col-span-6"
|
|
background={false}
|
|
icon="/docs/img/icons/ionic-icon"
|
|
>
|
|
Learn how to build a user management app with Ionic Vue and Supabase Database, Auth, and Storage functionality.
|
|
</GlassPanel>
|
|
</Link>
|
|
<Link
|
|
href="/guides/getting-started/tutorials/with-ionic-angular"
|
|
passHref
|
|
className="col-span-4"
|
|
>
|
|
<GlassPanel
|
|
title="Ionic Angular"
|
|
span="col-span-6"
|
|
background={false}
|
|
icon="/docs/img/icons/ionic-icon"
|
|
>
|
|
Learn how to build a user management app with Ionic Angular and Supabase Database, Auth, and Storage functionality.
|
|
</GlassPanel>
|
|
</Link>
|
|
</div>
|
|
</$Show>
|