Setting Up The Next.js Project With Supabase

Project Source Code

Get the project source code below, and follow along with the lesson material.

Download Project Source Code

To set up the project on your local machine, please follow the directions provided in the README.md file. If you run into any issues with running the project source code, then feel free to reach out to the author in the course's Discord channel.

Table of Contents

This lesson preview is part of the Real-Time Collaborative Apps with Next.js and Supabase course and can be unlocked immediately with a \newline Pro subscription or a single-time purchase. Already have access to this course? Log in here.

This video is available to students only
Unlock This Course

Get unlimited access to Real-Time Collaborative Apps with Next.js and Supabase, plus 70+ \newline books, guides and courses with the \newline Pro subscription.

Thumbnail for the \newline course Real-Time Collaborative Apps with Next.js and Supabase

  • [00:00 - 00:27] Alright, let's get it started with our project. I'm in my terminal. I'm using something called "item". This is available for Mac and also for Windows and I'm in the place, the location that my project will be lived. So you can put your project in any place anywhere in your computer. So then you can go to your path. Basically you can type cd and go to the project and you will be there. And first thing, we need to install next.js and superbase type and px create next app.

    [00:28 - 00:38] And you can give additional parameters. So what I'm going to do is add with superbase. This will help us to create all the authentication route, install the necessary packages.

    [00:39 - 00:49] And there will be some some guides for our application. So let's start running this. You can say yes. And then you can give any name to your package. So I'm going to say storeyboard.

    [00:50 - 01:04] Alright, as you can see, now it is installed. Yes, our issue studio code. I'm going to zoom in a little. Yeah, this is a new next.js project. And you can see there is a app folder.

    [01:05 - 01:50] This is recently released with next.js. And we are going to use this new feature. Very cool. And if you go inside that folder, there is this authentication folder and login folder. So superbase already created some features for us. So we don't have to spend too much time to rebuilding, reinventing these things. So let's go into package file. Let's investigate this. So first thing is, as any other project next to this project, you have the scripts build dev and start. And you have some packages. These two packages that we are going to use for building our real time features . And what I'm going to do, sorry, I forgot to mention one more things. Tailwind CSS and Type Script also there.

    [01:51 - 02:02] So this is these are also important that we are going to use tailwind CSS to style our application. So I'm going back to our terminal. And I'm going to type down there. Let's try to start this project.

    [02:03 - 03:03] So it's already running and next to is 14. And you can go to the project clicking this one. And yes, here goes the homepage. There is already nice styling and some text here. But you can see any login or anything. Why is that? It's because we need to do three more things here. And as you can see, there's example file environment file dot env local. We can rename this to environment.local. And just need to follow these steps. So you need to sign up to superbase and get these keys. So I'm going to log in to superbase. And I already have an account. But if you don't have an account yet, you can go to superbase.com and sign up. So once you sign up, you have the dashboard here. And if you go to the project settings, I can get these two keys . And on key, you can paste it here. And project URL, you can copy from here and paste it here.

    [03:04 - 03:34] All right, we have all the basic settings we need. And let's go to our terminal and try to restart the project because we changed the environment variables. Now you can see the login page. If you click here and there is the login page, you can sign up or log in from here. And what happened if you log in? I already had account with this email. And you logged in. This is a page that after