Transcription
I wanted to share a really straightforward, fast, and effective way of starting a Next.js project. At the moment, if you're starting a NextJS project in the terminal by running `create-next-app`, that could be quite a time-consuming process trying to set up the configuration, trying to connect Superbase, trying to connect GitHub, trying to connect Vercel. It'll take time, effort, and you'll be burning a lot of tokens if you're using Cursor for Vercel. I have a much better way. Let's take a look.
I wanted to quickly let you know about my two flagship Coding with AI courses. The first course teaches you how to build a complete full-stack SaaS app using Cursor. You'll integrate essential tools like Stripe for payments, AI services, and email, all while building with Next.js, Superbase, and Vercel. It's everything you need to go from zero to production-ready web apps.
The second course is for anyone who wants to build native mobile apps with Cursor. You'll learn how to create a fully functional app with in-app payments, push notifications, AI features, and email integrations. And you'll finish by deploying your app to the Apple App Store and Google Play. And the best part, you don't need to know how to code. I'll teach you how to think like a product engineer and guide the AI model to build your app with you. If there's ever been a time to learn how to build with AI, it's right now. So, come join me.
Now, connecting the dots between these different services can take a bit of time, even with AI. But, Vercel have actually built a very streamlined way of connecting all of these applications with just a few short steps. So instead of starting down here in Cursor and trying to connect everything, what we'll do in fact is start here in Vercel and we're going to connect GitHub. We're going to connect Superbase and then from there we will be cloning our project down to Cursor to start work. And this also means that straight away we can make changes to our project. We can then push the changes back to GitHub and we'll see them live on Vercel with minimum effort.
So, Vercel has in the resources tab templates. That's where we are now. I'm going to search for Superbase. And here we can see a Superbase starter. This works across app router, comes middleware, client, server. It just works. The authentication is Superbase Auth and so is the database. Perfect. So here I see a deploy button. Let's click it.
Now, I'm currently logged into my GitHub account and my Superbase account. And this modal is asking me to basically connect GitHub directly here within Vercel. I'm going to name the Superbase starter. And I've got one team. I'm going to keep that team selected. I'm going to click create.
[Music]
Okay. Step number two, add storage. So, let's add Superbase as our backend. Click add. I'm going to accept the defaults because this is just a demo. Going to name Superbase Starter. I'm going to click create. Okay, that's done in a matter of seconds. Click done. For the sake of this demo, I'm going to leave all of the environments.
[Music]
And here we go. We are basically deploying our project live to Vercel behind a login so the public won't be able to gain access. But it's just this short little form is all it took to connect Vercel to GitHub and to Superbase. Super quick. I haven't used any tokens. In fact, this hasn't cost me anything at this stage. And like that, congratulations. We're live on the web. If I scroll down, continue to dashboard and I can visit my new app.
Now, like I said, because I'm logged into Vercel, only I can see this. Basically, here's our website, and it comes with a full integration with Superbase authentication and database. So, how do we actually start working on this project? I've just opened up GitHub, and here is my project. Initial commit 3 minutes ago. Brilliant. So that's all connected.
Now we want to get this project down into Cursor. So I'm going to click on this code button. I'm going to copy the HTTPS URL. Copy. I'm now going to type `git clone` and then paste the URL. Okay, that's done. The folders on my computer. Let's open it in Cursor. I'm going to select open project. And I just navigated to the folder in my root users folder. And there we go. It's up and running.
Now, a few more steps and then we'll be able to start editing our project. I'm going to bring up the terminal and I'm going to type `pnpm install` to get those packages and dependencies installed and updated. Okay, that's done. I'm now going to start the development server `pnpm dev` and select localhost:3000. Fantastic. So, you can see we're up and running on localhost:3000. Our project is now almost ready to develop. But it's saying that the Superbase environment variables are required. So let's apply those variables to our project and then we'll be able to sign up to Superbase.
I've opened my Superbase starter that was created by Vercel and I can see that the project status is now green. From here I need my environment variables. So I'm going to click on this handy connect button at the top. I'm going to switch across to app frameworks and I'm going to select the default, which is Next.js with app router and superbase.js. Quite simply, I just need to copy these environment variables. We can see that in the tab it looks like it's a folder with `.env.local`. So now that I've done that, I can head back to Cursor. Find the `.env.example`. I'm going to rename this. Instead of example, I'm going to say local. And then quite simply, I'm just going to paste these keys in. I'm going to save.
And then I'm going to go back to the browser. Now the little notice about adding environment variables is gone. So let's try sign up.
[Music]
Okay. So, I need to confirm. I'm going to just use my phone for this. Confirm email. That's confirmed. Even though it says site cannot be reached because we're in localhost, it will still confirm. And now simply I can go back to login.
[Music]
Okay. So I am logged in. I'm authenticated and I'm in a protected dashboard page. And if I have a look inside of Superbase, here I am in my authentication tab. Here is my authentication table. There is my email address.
So guys, that was really quick. And what I like about this particular method is that it connects all of the dots, gets everything out of the way and connected so we can start developing just within a few minutes. The other good thing is that this starter kit is nicely integrated with our Next.js project, meaning it's safe and secure. We've got protected routes set up and we've got session management up and running. It's basically free to get started this way. It's going to save you a lot of time and a lot of tokens.