Deploy Next.js App Router project to production with Vercel

Instructor: Let's deploy our Next.js application to Vercel. Back over in our code, we have localhost:3000 hard-coded in our auth-button-client and our github-button. Our auth flow will only work when running locally.

We can make this value dynamic based on the environment that we're running in by using backticks and then replacing our localhost origin with our location.origin. Let's copy this value across to our github-button and replace our callback URL. Now, if we quit our development server and run npm run build, and if we scroll up a little bit, we can see some errors printed to the console.

If we go all the way to the top, we can see this, cannot resolve encoding in the node-fetch library. This one's an easy fix. We can run npm install or i and then -D for a dev dependency, and install that encoding library.

Now, if we run npm run build again, we're left with this DYNAMIC_SERVER_USAGE error which is saying that it's detected that we're using our cookies function in a route it expected to be static. This is because server components are cached and static by default, but we're using this cookies function to create our authenticated supabase client.

We can tell Next.js that this route is intentionally dynamic by exporting out a const variable for dynamic and setting this to the string force-dynamic. We can copy this value, and then do a find across our project for anywhere we're using our cookies function. Then in each one of these components, exporting out our dynamic variable set to force-dynamic.

Now, if we run npm run build again, we'll see we have no errors printed to the console. We're ready to push our code up to GitHub and deploy to Vercel. Let's run git add . to stage our changes, and then git commit with a message, "deploy app". Now we need a GitHub repository to push these changes too. Let's go to github.com and click New to create a new repository.

Our name is going to be blue-bird. Then if we scroll down, we don't want any of these. Let's create our repository. Now, copy this value, and then back in our project. We want to run git remote add origin and then paste in our value. Now we can push up our changes with git push origin main. If we go back to our GitHub repo and refresh, we'll see our project has been pushed up.

Let's head over to vercel.com to add a new project. I've signed in with my GitHub account previously, so it has access to all of my repos. Once you've done that, we can import our blue-bird project, which it has detected is a Next.js project. We need to set some environment variables. We can copy these across from our .env.local file.

We can select all, then copy and then paste directly into this input box to automatically populate our SUPABASE_URL and also our SUPABASE_ANON_KEY. Let's deploy our application. We can see confetti falling from the sky because we've successfully deployed our project. We can click this little preview here to go through to our deployed application, which in my case is blue-bird-seven.vercel.app.

Let's copy our Production URL. Then back over in GitHub, click your avatar, then go to Settings, then scroll down to Developer settings at the bottom, then OAuth Apps, select our Blue Bird app, then scroll down to our home page URL and replace this with our Production URL from Vercel. Let's click Update application.

Now, over in our Supabase project, let's go to Authentication, then URL Configuration, change our Site URL to our Production URL from Vercel and click Save. Now, if we go to the production version of our application and click our GitHub logo to sign in, we can see all of our tweets and like the ones we think are funny.

If we're signed in as different users, we can see when one of those adds a tweet, like, "The Supabase brand color should be purple." We'll see it shows up at the top of our tweets for both users without needing to refresh.