Today, we're showing you how to create a new Next.js 15 app and link it to your Supabase project in less than 10 minutes!
Next.js and Supabase are one of the most popular combinations in modern web development. In this video, Jon Meyers shows how to get up and running in a single command:
▶ $ npx create-next-app -e with-supabase
This creates a brand new Next.js 15 app using the App Router, and is already configured to use server-side, cookie-based auth with Supabase.
After this tutorial, you'll be able to set up your app to read and write data and add authentication. Check the Supabase docs for examples to subscribe to real-time changes and other fancy AI vector embeddings and tooling that makes your life WAY easier as a developer.
We're going to start with `npx` to run the `create-next-app` package, choose the `with-supabase` template we've set up for you, and get your notes app up and running in under 10 minutes so you can start pushing out your app.
What you'll learn:
✅ Create and Link: Create a new Next.js app with the `with-supabase` template and link it to your Supabase project for full functionality.
✅ Read and Write: Dive into your Supabase project to read and write data, setting the foundation for your app's functionality.
✅ Add Authentication: Implement authentication in your app, allowing users to sign up and log in with their email and password.
After this video, you'll be able to:
✅ Launch Your App: Have a fully functional note-taking app with capabilities to manage tasks and user authentication.
✅ Handle Authentication Flows: Manage user sessions and authentication flows smoothly, enhancing your user experience which will keep people coming back!
Chapters:
00:00 Building apps with Next.js and Supabase
00:25 Create a Next.js 15 app using the official Supabase Starter template
01:07 Start a new hosted Supabase project
01:51 Connect Next.js 15 app to hosted Supabase project
02:47 Adding a user to Supabase Organization to use for testing Authentication
04:48 Run raw SQL to create schema and populate with data
05:30 Query Supabase data from Next.js 15 app
07:06 Create a protected page with Next.js and Supabase
08:26 Migrating an existing Next.js application to use Supabase Auth
09:29 Build a SaaS Product with Next.js and Supabase in 10 mins
💻 Videos to watch next:
▶ Watch all Next.js and Supabase tutorials: • Cookie-based Auth and the Next.js App Rout...
▶ How to host a Postgres database with Supabase: • FASTEST way to host a Postgres database (2...
▶ This is why you need cookie-based Auth for the Next.js App Router (2024): • Why you need cookie-based Auth for the Nex...
👇 Learn more about Supabase 👇
🕸 Website: https://supabase.com/
🏁 Get started: https://app.supabase.com/
📄 Docs: https://supabase.com/docs
🔔 Subscribe for more tutorials and feature updates from Supabase: / @supabase
📱 Connect with Us:
▶ GitHub: https://github.com/supabase/supabase/
▶︎ Discord: https://discord.supabase.com/
▶ Twitter: / supabase
▶ Instagram (follow for memes): / supabasecom
ABOUT SUPABASE:
Supabase is the open source Firebase alternative. Supabase provides a full Postgres database for every project with pgvector, backups, realtime, and more. Add and manage email and password, passwordless, OAuth, and mobile logins to your project through a suite of identity providers and APIs.
Build in a weekend, scale to millions.
#Supabase #AppDevelopment #RealtimeApps #DeveloperTools
