mirror of
https://github.com/supabase/supabase.git
synced 2026-06-18 05:33:50 +08:00
ae727a4659
* Quickstart next 16 update * Fix paths and env vars * docs: refactor nextjs server-side auth to use Proxy instead of middleware * docs: refactor nextjs server-side auth to match proxy * docs: refactor nextjs example to match Proxy * docs: refactor nextjs auth AI prompt to match Proxy * docs: refactor nextjs sentry telemetry integration to match Proxy * examples: update nextjs realtime example to match middleware * docs: refactoring guides to use nextjs proxy * examples: update nextjs-full example to match Next16 template * example: update nextjs-user-management to match nextjs 16 * docs: refactoring nextjs user-management tutorial to use typescript only * docs: refactoring nextjs quickstart, removing step 4 since this step is already included on `with-supabase` template, we can just remove this redundant step * docs: auth-helpers nextjs pages, Nextjs16 proxy disclaimer * stamp: lint * stamp: revert 'NEXT_PUBLIC_SUPABASE_PUBLISHABLE_KEY' * stamp: nextjs examples, revert to use cookie options * fix(docs): typo * docs: updating nextjs-auth troubleshoot guide to match proxy * Update apps/docs/content/guides/getting-started/quickstarts/nextjs.mdx * Revert auth-helpers changes * Revert auth-helpers content * Apply suggestions from code review * Update apps/docs/content/troubleshooting/how-do-you-troubleshoot-nextjs---supabase-auth-issues-riMCZV.mdx * Update apps/docs/content/troubleshooting/how-do-you-troubleshoot-nextjs---supabase-auth-issues-riMCZV.mdx * Update apps/docs/content/troubleshooting/how-do-you-troubleshoot-nextjs---supabase-auth-issues-riMCZV.mdx * Update apps/docs/content/troubleshooting/how-do-you-troubleshoot-nextjs---supabase-auth-issues-riMCZV.mdx * Apply suggestions from code review * Prettier --------- Co-authored-by: kallebysantos <kalleby_santos@hotmail.com>
94 lines
4.2 KiB
Markdown
94 lines
4.2 KiB
Markdown
<a href="https://demo-nextjs-with-supabase.vercel.app/">
|
|
<img alt="Next.js and Supabase Starter Kit - the fastest way to build apps with Next.js and Supabase" src="https://demo-nextjs-with-supabase.vercel.app/opengraph-image.png">
|
|
<h1 align="center">Next.js and Supabase Starter Kit</h1>
|
|
</a>
|
|
|
|
<p align="center">
|
|
The fastest way to build apps with Next.js and Supabase
|
|
</p>
|
|
|
|
<p align="center">
|
|
<a href="#features"><strong>Features</strong></a> ·
|
|
<a href="#demo"><strong>Demo</strong></a> ·
|
|
<a href="#deploy-to-vercel"><strong>Deploy to Vercel</strong></a> ·
|
|
<a href="#clone-and-run-locally"><strong>Clone and run locally</strong></a> ·
|
|
<a href="#feedback-and-issues"><strong>Feedback and issues</strong></a>
|
|
<a href="#more-supabase-examples"><strong>More Examples</strong></a>
|
|
</p>
|
|
<br/>
|
|
|
|
## Features
|
|
|
|
- Works across the entire [Next.js](https://nextjs.org) stack
|
|
- App Router
|
|
- Pages Router
|
|
- Proxy
|
|
- Client
|
|
- Server
|
|
- It just works!
|
|
- supabase-ssr. A package to configure Supabase Auth to use cookies
|
|
- Styling with [Tailwind CSS](https://tailwindcss.com)
|
|
- Optional deployment with [Supabase Vercel Integration and Vercel deploy](#deploy-your-own)
|
|
- Environment variables automatically assigned to Vercel project
|
|
|
|
## Demo
|
|
|
|
You can view a fully working demo at [demo-nextjs-with-supabase.vercel.app](https://demo-nextjs-with-supabase.vercel.app/).
|
|
|
|
## Deploy to Vercel
|
|
|
|
Vercel deployment will guide you through creating a Supabase account and project.
|
|
|
|
After installation of the Supabase integration, all relevant environment variables will be assigned to the project so the deployment is fully functioning.
|
|
|
|
[](https://vercel.com/new/clone?repository-url=https%3A%2F%2Fgithub.com%2Fvercel%2Fnext.js%2Ftree%2Fcanary%2Fexamples%2Fwith-supabase&project-name=nextjs-with-supabase&repository-name=nextjs-with-supabase&demo-title=nextjs-with-supabase&demo-description=This%20starter%20configures%20Supabase%20Auth%20to%20use%20cookies%2C%20making%20the%20user's%20session%20available%20throughout%20the%20entire%20Next.js%20app%20-%20Client%20Components%2C%20Server%20Components%2C%20Route%20Handlers%2C%20Server%20Actions%20and%20Proxy.&demo-url=https%3A%2F%2Fdemo-nextjs-with-supabase.vercel.app%2F&external-id=https%3A%2F%2Fgithub.com%2Fvercel%2Fnext.js%2Ftree%2Fcanary%2Fexamples%2Fwith-supabase&demo-image=https%3A%2F%2Fdemo-nextjs-with-supabase.vercel.app%2Fopengraph-image.png&integration-ids=oac_VqOgBHqhEoFTPzGkPd7L0iH6)
|
|
|
|
The above will also clone the Starter kit to your GitHub, you can clone that locally and develop locally.
|
|
|
|
If you wish to just develop locally and not deploy to Vercel, [follow the steps below](#clone-and-run-locally).
|
|
|
|
## Clone and run locally
|
|
|
|
1. You'll first need a Supabase project which can be made [via the Supabase dashboard](https://database.new)
|
|
|
|
2. Create a Next.js app using the Supabase Starter template npx command
|
|
|
|
```bash
|
|
npx create-next-app -e with-supabase
|
|
```
|
|
|
|
3. Use `cd` to change into the app's directory
|
|
|
|
```bash
|
|
cd name-of-new-app
|
|
```
|
|
|
|
4. Rename `.env.example` to `.env.local` and update the following:
|
|
|
|
```
|
|
NEXT_PUBLIC_SUPABASE_URL=[INSERT SUPABASE PROJECT URL]
|
|
NEXT_PUBLIC_SUPABASE_PUBLISHABLE_KEY=[INSERT SUPABASE PROJECT API ANON KEY]
|
|
```
|
|
|
|
Both `NEXT_PUBLIC_SUPABASE_URL` and `NEXT_PUBLIC_SUPABASE_PUBLISHABLE_KEY` can be found in [your Supabase project's API settings](https://app.supabase.com/project/_/settings/api)
|
|
|
|
5. You can now run the Next.js local development server:
|
|
|
|
```bash
|
|
npm run dev
|
|
```
|
|
|
|
The starter kit should now be running on [localhost:3000](http://localhost:3000/).
|
|
|
|
> Check out [the docs for Local Development](https://supabase.com/docs/guides/getting-started/local-development) to also run Supabase locally.
|
|
|
|
## Feedback and issues
|
|
|
|
Please file feedback and issues over on the [Supabase GitHub org](https://github.com/supabase/supabase/issues/new/choose).
|
|
|
|
## More Supabase examples
|
|
|
|
- [Next.js Subscription Payments Starter](https://github.com/vercel/nextjs-subscription-payments)
|
|
- [Cookie-based Auth and the Next.js 13 App Router (free course)](https://youtube.com/playlist?list=PL5S4mPUpp4OtMhpnp93EFSo42iQ40XjbF)
|
|
- [Supabase Auth and the Next.js App Router](https://github.com/supabase/supabase/tree/master/examples/auth/nextjs)
|