Deployment

Since Next.js was created by the team at Vercel, the easiest and most reliable way to deploy is to use vercel.com (opens in a new tab).

1. Push to git

To be able to deploy your project on Vercel you have to push your project to a git repository. We recommend using Github (opens in a new tab), but you can use any other git repository.

You first have to add the url of your new repository as an origin and then you can push your project to it.

git remote rename origin supastarter-origin
git remote add origin <YOUR_GIT_URL>
git push -u origin main

2. Setup vercel

To host your project on Vercel you first have to create an account (opens in a new tab).

3. Deploy your project

After signing up you will be promted to import a git repository. Select the git provider of your project and connect your git account with Vercel.

Now you will see a list of all your projects. Select the project you want to deploy and click on the Import button.

In the Configure Project view expand the Enviornment Variables section and add the following variables one by one (you can copy them from the .env file in your projects root too):

NEXT_PUBLIC_SITE_URL=<YOUR_SITE_URL>
NEXT_PUBLIC_SUPABASE_URL=<YOUR_SUPABASE_URL>
NEXT_PUBLIC_SUPABASE_ANON_KEY=<YOUR_SUPABASE_ANON_KEY>
SUPABASE_SERVICE_ROLE_KEY=<YOUR_SUPABAfSE_SERVICE_KEY>
NEXT_PUBLIC_STRIPE_PUBLIC_KEY=<YOUR_STRIPE_PUBLISHABLE_KEY>
STRIPE_SECRET_KEY=<YOUR_STRIPE_SECRET_KEY>

The NEXT_PUBLIC_SITE_URL is the main url of your site, e.g. supastarter.dev.

Then click the Deploy button and your project will be deployed.

4. Add domain to supabase

Once the project was deployed you will need to add the domain to your supabase auth settings, to enable the redirects.

You can find the domain on the Overview page of your Vercel project under Domains.

Now head to supabase and navigate to Authentication > URL Configuration and add the following redirect URL to the Redirect URLs:

https://<YOUR_VERCEL_PROJECT_URL>/**

The ** is wildcard that enables all redirect urls for the domain.