mirror of
https://github.com/supabase/supabase.git
synced 2026-10-18 23:59:08 +03:00
improve Next.js Auth Helpers sections
This commit is contained in:
1 parent
bda6ba8e5a
commit
fb3b7528a6
1 file changed
+14
-9
@@ -79,7 +79,7 @@ After Vercel has deployed the app, it works without any additional configuration
|
||||
**Vercel AI Chatbot**
|
||||
Next.js 13, Open AI, Vercel Function, Auth
|
||||
|
||||
### Database branching
|
||||
### Database Branching
|
||||
|
||||
We announced Database Branching on [Tuesday](/blog/supabase-local-dev#branching-and-preview-environments). We've designed this to work perfectly with Vercel's Preview Deployments.
|
||||
|
||||
@@ -89,7 +89,7 @@ For now, Branching in Supabase is limited to development partners, but we'll be
|
||||
|
||||
## Next.js 13 App Router Support
|
||||
|
||||
The new App Router in Next.js adds a lot of exciting features, like React Suspense and Streaming. Supabase has built support for both modalities of Next.js - the Pages Router and the new App Router.
|
||||
The Next.js App Router introduces exciting new functionality made possible by React Suspense and Streaming. Supabase has been working closely with the Next.js team to ensure full support for the App Router, without compromising the experience for those building with the Pages Router.
|
||||
|
||||
<div className="video-container">
|
||||
<iframe
|
||||
@@ -102,28 +102,33 @@ The new App Router in Next.js adds a lot of exciting features, like React Suspen
|
||||
></iframe>
|
||||
</div>
|
||||
|
||||
The Next.js App Router adds support for server-side features - Server Components, Route Handlers and Server Actions. Server-side rendering is powerful, but also makes it difficult to share state across user sessions. Supabase Auth solves this problem by storing session data in cookies, and we've simplified this for you with our new [Next.js Auth Helpers](https://supabase.com/docs/guides/auth/auth-helpers/nextjs).
|
||||
The Next.js App Router shifts a significant amount of your app development from the client to the server, using Server Components, Route Handlers and Server Actions. This means Supabase Auth needs to be configured to store session data in cookies - available in the browser and on the server - rather than Local Storage. We've simplified this process for you with our new [Next.js Auth Helpers package](https://supabase.com/docs/guides/auth/auth-helpers/nextjs).
|
||||
|
||||
You can use `supabase-js` in all the new server based areas of App Router based Next.js:
|
||||
This configures cookie-based Auth, making the user's session available throughout the entire Next.js App Router stack:
|
||||
|
||||
- [Client Components](/docs/guides/auth/auth-helpers/nextjs#client-components) — `createClientComponentClient`
|
||||
- [Server Components](/docs/guides/auth/auth-helpers/nextjs#server-components) — `createServerComponentClient`
|
||||
- [Server Actions](/docs/guides/auth/auth-helpers/nextjs#server-actions) — `createServerActionClient`
|
||||
- [Route Handlers](/docs/guides/auth/auth-helpers/nextjs#route-handlers) — `createRouteHandlerClient`
|
||||
- [Middleware](/docs/guides/auth/auth-helpers/nextjs#middleware) — `createMiddlewareClient`
|
||||
|
||||
For client components, Supabase works exactly as it did before. Next.js explicitly supports this by adding `'use client'` to the top of pages/components.
|
||||
|
||||
## Scaffolding a new Next.js app with Supabase
|
||||
|
||||
[create-next-app](https://nextjs.org/docs/pages/api-reference/create-next-app) is one of the easiest way to get started with Next.js.
|
||||
|
||||
We've created a new template for `create-next-app` scaffolding Supabase projects:
|
||||
|
||||
```markdown
|
||||
npx create-next-app --with-supabase
|
||||
```sh
|
||||
npx create-next-app -e with-supabase
|
||||
```
|
||||
|
||||
This new official template is fully-loaded with the new App Router setup.
|
||||
This creates a new Next.js app configured with:
|
||||
|
||||
- 100% Server-side cookie-based Auth
|
||||
- 100% TypeScript
|
||||
- Beautiful landing and auth pages with Tailwind CSS
|
||||
|
||||
This is the perfect starting point for any application built with Next.js and Supabase! 🚀
|
||||
|
||||
Check out the [`/app/_examples`](https://github.com/vercel/next.js/blob/canary/examples/with-supabase/app/_examples) folder for an example of creating a Supabase client in:
|
||||
|
||||
|
||||
Reference in new issue
Block a user