Introduction to Next.js Deploying Next.js on Vercel

Transcript from the "Deploying Next.js on Vercel" Lesson

[00:00:00]
>> In order to get it deployed we gotta do a couple things. I'm actually just going to stash all of this. Let me see. I'm gonna check out one of the branches that I know is solid, so I'm now fixing some of my bugs. We're gonna check out the master.

[00:00:18] I don't want this, okay. What we got. I got all these extra files. Okay, so, check out the master, and then what I need to do is. Go away. I need to change those hard coded fetch calls. So what I'll do is, I'll add some environment variables. So, instead of having things here, I don't know what this URL is gonna be, so I have to add an environment variable.

[00:01:00] So I'll go down to our next config here, and make it take an environment variable. So what I'll do is, I'll add some environment variables here, and I'll call it API_URL, and for local host is localhost. Well, so we've got the API_URL. And then what I can do is, I can head back into.

[00:01:32] These things, or these things right here, and I could just use the URL instead, so I'll just do this. Process.env.API_URL, like that. And do the same thing on the id one. Cool, so we got the API_URL's there. We just need to make sure we set these environment variables on Vercel only deploy.

[00:02:01] So, all that's good. Looks really good here. I'm just gonna make sure I have Vercel on my machine, on this version of Node, looks like I do. You can do vc for short, you can also just type in vercel. I'm just gonna type in vc, so we can make these changes.

[00:02:23] All right, now let's type in vc. Got an update here, and it's saying, cool, do you want to set up and deploy this thing? Yeah, I do. And, I could pick which organization I want to deploy to, I wanna deploy to my personal organization. Link to an existing project?

[00:02:41] I don't have any existing projects on Vercel for this app, so I'm gonna say no. What's your project's name? Nextjs-course-app. In which directory is your code located? Right at the source. So I'm just gonna say, that's setting up projects. And you can see right there, auto detected project settings.

[00:03:05] This is the Next.js app, cool. And this is like. We got these commands here that say, for our Next.js app, we think you should run npm run build, or next build. This is the same stuff that I already have. And they're saying, hey, can we overwrite it? And I was like, sure, I don't care, it's pretty much the same thing.

[00:03:21] This is gonna override it. You can just say no, and it will totally work the same way. Which settings would you like to override? I guess they're all the same, I'll just put build command, sure. So right now it's building. They pretty much upload your thing, and they have like their own ci, where they build it in their ci.

[00:03:42] And you can look at this link and you can go inspect it to see how it's building. All right, so you can check it out right here, I like their ci. And you can see, if this thing doesn't break, we'll see what happens. [LAUGH] Usually, the first time you deploy something, it never builds, so.

[00:04:03] Looks like it built. And you can see right here it's like, yeah, SSG, static site generation. So it isn't static. Some static stuff right here. It even tells you to build like, yep. Yeah, we did some stuff right here. All right. And it's now-.
>> [CROSSTALK] Completely recognized your variables?

[00:04:32]
>> No, it's. I mean, no, it doesn't have the values, but I'm gonna add them in here. But we can see right herem for this page it loaded up, and there we go, nextjs-course-app.vercel.app. Easy. I think if I go to the next page it might break, let's see.

[00:04:53] Yeah, that's gonna break, because I don't have the variables in there, so I need to go add the variables in Vercel. But this one didn't use any variables, so, it was totally fine, it rendered fine, but the other ones didn't. So I gotta go add the variables in there, and.

[00:05:09] Forgot to do that in next somewhere, I think it's like, yeah. Where'd you do that? Here we go. Yeah, so it's breaking because it's trying to. Still trying to get localhost. So, yeah, it still failed because I don't have the right variables in here. So, I need to just update the variables, which again, I think you do that here in Settings, you go to Environment Variables, bam, and you can add them here.

[00:05:47] So, if we do API_URL, and then. if I get the URL of my API, which is this thing. Put that there. Maybe do the same thing. Like that, and Preview, why not? No, the Preview is gonna have a different URL, so, and so does Development. This one's the only one we want.

[00:06:20] So I think that will fix it. I think now you gotta do a redeployment. I'm pretty sure I gotta redeploy this thing. Yeah, you gotta redeploy, well, I'm in the wrong thing, where did it go? Yeah, I gotta redeploy this thing, so. I guess I'll just redeploy it, why not?

[00:06:45] But yeah, that's pretty much Vercel. Very simple to get started, very easy. As is everything else, everything else is pretty simple too. But I think Vercel does the best job when it comes to deploying their own stuff, so, yeah, highly recommend it.