Software Tech

Vercel Integration and Next.js App Router Support

Vercel's open source framework, Next.js, is the most popular frontend framework for Supabase developers. At Supabase, we feel it's

Vercel Integration and Next.js App Router Support

Vercel' open source , Next.js, is the popular frontend framework for Supabase developers.

At Supabase, we feel it's important to provide developers with the tools they need to build on the platforms they love. So for the past few months, we've doubled- on the Vercel x Supabase experience. Here are few of the newest improvements.

The New Supabase x Vercel integration

Our new Vercel Integration streamlines the of creating, deploying, and maintaining web applications.

Monorepo support

You can now link multiple Vercel projects to a single Supabase project:

Previously we mapped each Vercel project to a single Supabase project. With this release, we're introducing the concept of project ‘Connections'. Supabase projects can have an unlimited number of Vercel Connections. This is especially useful for monorepos using Turborepo.

Automatically managed Supabase config

We've improved the way we manage your Supabase variables.

Supabase keeps each of your Vercel Projects updated with Environment Variables, managing your secrets (like service-role-key) and public variables (like supabase-url).

Importantly, Supabase now updates the Auth Redirect URIs to match your main Vercel project domain and any preview deployment URLs. We listen to your Vercel deployment webhooks and adjust your redirects accordingly.

Full list of environment variables:

POSTGRES_URL // URL of your Postgres database.
POSTGRES_URL_NON_POOLING // URL of your Postgres database without pooling.
POSTGRES_USER // Username for your Postgres database.
POSTGRES_HOST // Host for your Postgres database.
POSTGRES_PASSWORD // Password for your Postgres database.
POSTGRES_DATABASE // Name of your Postgres database.
SUPABASE_SERVICE_ROLE_KEY // Service role key for your Supabase project.
SUPABASE_URL // URL for your Supabase project.
SUPABASE_ANON_KEY // Anonymous key for your Supabase project.
NEXT_PUBLIC_SUPABASE_URL // Publicly accessible URL for your Supabase project.
NEXT_PUBLIC_SUPABASE_ANON_KEY // Publicly accessible anonymous key for your Supabase project.

We've used the same naming convention as Vercel Postgres to make it easy to migrate between platforms.

Starter kits

Don't have a project to work on yet? Not a problem, Supabase has a range of Starter kits. With the click of a button you can you have an full-stack application running in less than a minute.

You can find a Vercel Starter kit by looking for Vercel's blue “Deploy Button”. Clicking on any one of these buttons will:

Take you to Vercel to clone the repository to your own account/organization
Auto install the Supabase Integration (if not already done so).
Then we make things really easy: Supabase checks for any migrations in the Starter kit, and if so, we'll run them in your new Supabase project.

After Vercel has deployed the app, it works without any additional configuration. Starter kits include everything from table schemas, authentication, and sample data from the seed.sql file.

Database Branching

We announced Database Branching on Tuesday. We've designed this to work perfectly with Vercel's Preview Deployments.

For now, Branching in Supabase is limited to development partners. We'll be rolling it out to everyone over the coming months. If you're interested in testing the new features, sign up for early access.

13 App Router Support

The new App Router in adds a lot of exciting features, like Suspense and Streaming. Supabase now fully-supports the App Router in Next.js:

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 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.

This configures -based Auth, making the user's session available throughout the entire Next.js App Router stack:

Client Components — createClientComponentClient

Server Components — createServerComponentClient

Server Actions — createServerActionClient

Route Handlers — createRouteHandlerClient

Middleware — createMiddlewareClient

Scaffolding a new Next.js app with Supabase

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:

npx create-next-app -e with-supabase

This creates a new Next.js app configured with:

cookie-based Auth
TypeScript
Tailwind CSS

This is the perfect starting point for any application built with Next.js and Supabase! 🚀

Check out the /app/_examples folder for an example of creating a Supabase client in:

Client Components
Server Components
Route Handlers
Server Actions

More integrations

We've got plenty more in store for Next.js developers which we will be rolling out over the next few months. If you're looking for more integrations, or you want to build your own, we're also launching a new Supabase Integrations Marketplace.

More Launch Week 8

Supabase Integrations Marketplace
Supabase Local Dev: migrations, branching, and observability
Hugging Face is now supported in Supabase
Launch Week 8
Coding the stars – an interactive constellation with Three.js and React Three Fiber
Why we'll stay remote
Postgres Language Server

About Author

Yuri

Leave a Reply

SOFAIO BLOG We would like to show you notifications for the latest news and updates.
Dismiss
Allow Notifications