Deploying a Nextjs project to Vercel - vonschappler/Ultimate-React GitHub Wiki

To depploy a next project to Vercel, the very fist step is to push the project files to a GitHub account.

Because we already have a GitHub account used to create the internal application for Wild Oasis, all that is required is to create a new public repository and send the files in the project folder to GitHub.

Once the project is uploaded, the next step is to connect Vercel to the GitHub account and in there we create a new project and link the new project to the GitHub repository created with the project files.

Because our project depends on some variables, we need to add them inside Vercel's project dashboard.

The easies way of setting up the enviromental variables is by simply getting all the contents from the file .env.local and pasting on the first field inside the Enviromental Variabiles section of the project dashboard.

The first enviromental variable we need to set, is the the url used by NextAuth.

This variable can be updated/setup inside the project settings, under Environment Variables section.

Search for NextAuth_URL and replace its value, by pasting the url that was setup for your project, saving the new value set up and redeploying the application.

The final part is to deploy the google api that we creeated at some point of the project.

Before deplying that we need to be sure that we add the following urls to their related fields and save the changes:

# Authorized JavaScript origins
https://project-name.vercel.app

# Authorized redirect URIs
https://project-name.vercel.app/api/auth/callback/google