mirror of
https://github.com/supabase/supabase.git
synced 2026-10-07 02:15:05 +03:00
Saxon FletcherandClaude Opus 5
b1d2efd99e
## I have read the [CONTRIBUTING.md](https://github.com/supabase/supabase/blob/master/CONTRIBUTING.md) file. YES ## What kind of change does this PR introduce? Feature, docs. Part 2 of 6 in a stack that splits the library redesign into reviewable pieces. ## What is the current behavior? The library documents individual blocks. Nothing answers "I have no project yet" — a reader who wants a working app has to assemble one from block guides and figure out the scaffolding themselves. ## What is the new behavior? Four starter guides under `/docs/starters`, each starting from an empty directory and ending with a running app on Supabase: - **Next.js starter** — composes the library's own password-based auth block. - **SaaS starter** — the community subscription-payments template, with Stripe setup. - **AI chat app** — the community Vercel AI SDK template. - **Flutter starter** — the user-management example, with profiles and avatar uploads. They reuse the existing doc route, so the sidebar, command menu, Markdown export and `llms.txt` pick them up with no new plumbing. The framework selector already renders nothing for pages that declare no framework variants, so a starter page shows none. ## Additional context The starter pages are added here in the current site's page layout; the last PR in the stack converts them to the new one along with every other guide. <!-- This is an auto-generated comment: release notes by coderabbit.ai --> ## Summary by CodeRabbit - **New Features** - Added a Starter Apps section to the side navigation and command menu. - Added links for Next.js, SaaS, AI Chat, and Flutter starter projects, marked as new. - **Documentation** - Added setup and deployment guides for the Next.js and SaaS starters. - Added an AI Chat App guide covering configuration, local verification, and deployment. - Added a Flutter starter guide covering authentication, profiles, avatars, deep links, and hosted setup. <!-- end of auto-generated comment: release notes by coderabbit.ai --> --------- Co-authored-by: Claude Opus 5 <noreply@anthropic.com>
55 lines
2.2 KiB
Plaintext
55 lines
2.2 KiB
Plaintext
---
|
|
title: Next.js Starter
|
|
description: 'A Next.js app with Supabase authentication, TypeScript, and Tailwind CSS'
|
|
---
|
|
|
|
Start with a Next.js App Router project, then install the Library's password-based authentication block. The block adds sign-in, sign-up, password recovery, and a protected page.
|
|
|
|
## Installation
|
|
|
|
### Create the app
|
|
|
|
Use the [shadcn CLI](https://ui.shadcn.com/docs/cli#init) to create a Next.js app with Tailwind CSS and Radix-based components:
|
|
|
|
```bash
|
|
npx shadcn@latest init --template next --base radix --name my-app
|
|
cd my-app
|
|
```
|
|
|
|
### Install the block
|
|
|
|
Run the install command from your new project:
|
|
|
|
<BlockItem name="password-based-auth-nextjs" showOpenInV0={false} />
|
|
|
|
The installer adds the Supabase client and authentication routes. Keep the generated package lockfile with your project.
|
|
|
|
## Configure Supabase
|
|
|
|
Create a [Supabase project](https://supabase.com/dashboard/new), then add its URL and publishable key to `.env.local`:
|
|
|
|
```env
|
|
NEXT_PUBLIC_SUPABASE_URL=your-project-url
|
|
NEXT_PUBLIC_SUPABASE_PUBLISHABLE_KEY=your-publishable-key
|
|
```
|
|
|
|
Find these values in your project's [Connect dialog](https://supabase.com/dashboard/project/_?showConnect=true&connectTab=frameworks&framework=nextjs).
|
|
|
|
Set the Auth Site URL to `http://localhost:3000` in [URL configuration](https://supabase.com/dashboard/project/_/auth/url-configuration). Follow the [authentication block's email template and redirect setup](/library/docs/nextjs/password-based-auth#adding-email-templates) to enable email confirmation and password recovery. Set the generated forms' post-authentication destination to `/protected`.
|
|
|
|
## Run the app
|
|
|
|
```bash
|
|
npm run dev
|
|
```
|
|
|
|
Open [the sign-up page](http://localhost:3000/auth/sign-up), create an account, and follow the confirmation email to the protected page.
|
|
|
|
## Add more blocks
|
|
|
|
- [Social Auth](/library/docs/nextjs/social-auth) adds OAuth sign-in providers.
|
|
- [Current User Avatar](/library/docs/nextjs/current-user-avatar) displays the signed-in user's profile.
|
|
- [Dropzone](/library/docs/nextjs/dropzone) adds file uploads.
|
|
|
|
Built with [Next.js](https://nextjs.org/) and the [Supabase password-based authentication block](https://github.com/supabase/supabase/tree/master/apps/ui-library/registry/default/blocks/password-based-auth-nextjs).
|