Introduction to Next.js Deploying Next.js Overview

Transcript from the "Deploying Next.js Overview" Lesson

[00:00:00]
>> All right, let's talk about deployment. So depending on how you build your app, we'll determine where you can deploy to. So we talked about the different rendering modes and stuff like that, but we didn't really talk about like the different ways to build the Next.js app. So by default, a Next.js app has to be deployed to an environment that supports Node.js.

[00:00:20] I did talk about that. And that's because this is a full stack framework that uses as you've learned, server side rendering, API's, all different types of stuff. So you need a Node.js environment because it is a live server that's actually running. So yeah, you will need that. If you don't make any API routes, you still need a Node.js app or a Node.js environment by default.

[00:00:44] So if you don't want that you can use you can build your app in a different way. And that is something new, it's called Next Export. Basically what that does is it's going to export your Next.js app as purely static, it's literally going to build it static. No server, no runtime, deploy straight to a CDN, deploy wherever you want and Netlify, Vercel, anywhere, you can deploy it.

[00:01:10] But there are some gotchas with using the export that you can check out here, and I'm not really gonna, there's a lot. This is a lot of gotchas. So you can check them out there. But honestly, at the end of the day, if you just go at Vercel, the people who made next as to deploy your site, they pretty much handle everything.

[00:01:32] I mean, if anyone knows how to handle a Next.js, it's definitely people who made it. And it just so happens they also made a deployment platform. So it kind of just works. I'm pretty sure they use AWS as their infrastructure. So it's on AWS anyway, which is pretty good.

[00:01:46] So yeah, I would just use Vercel to deploy your stuff. And with that being said, like I said, if you need to deploy to a Node.js environment that's gonna rule out certain places. So I know Netlify is a popular one for a lot of people. You can't use Netlify by default with a Next.js app, there's like plugins and hacks and different things you can do.

[00:02:07] But the only way I've been able to see it work is if you find some way to get Next.js, you got to make like a custom server with Next.js. Which you can, we didn't talk about that, but you can make your own custom server, your entire custom server instead of the one that they use.

[00:02:22] And then hook that up to Netlify serverless functions and have the service functions act as the Next.js' server. And it's just to me just a lot of work. Like why would you do that? So it's really not worth it. I guess if you work at a company that only ever uses a certain technology and you have to use it, then yeah.

[00:02:40] But I would just use a different technology. I would either change the provider or I would change the framework. I wouldn't really do all of that. So yeah, I would use Vercel. It handles everything out of the gate. One thing though in our app is, yeah, we did hard code those API URL.

[00:02:59] So before you deploy, use the environment variables to switch out to the live URLs, otherwise, that's obviously not gonna work, right? It's gonna say like local host, or stuff like that. So, we're gonna deploy to Vercel, and like I said, is actually pretty easy. All you have to do is install the command line and then run this command.

[00:03:21] That's it. You don't have to do anything else. And then you're done. It's really that easy. Have you ever heard of a tool called Now a couple years ago? These are the creators of Now. And Now as a CLI that basically deploy your website right now. It was that easy.

[00:03:36] I think that's kind of where they started. And then they integrated to and now they're Vercel. But that same philosophy of like getting something out there as fast as possible is still there with inside of Vercel. So how do you recommend doing that? So, I think that's what we're gonna do.

[00:03:50] The other way to do it is, if you already have a project on GitHub, if you already push this up, it's on GitHub. You can just go into your Vercel account and you can just say, connect to this repo. And then it also just works that way as well.

[00:04:01] And that will give you a better development workflow because you'll get like preview branches on every PR. They'll send you, it'll post screenshots to your PR for you by default to show you the diffs between pages that changed, visual diffs which is really dope. There's a lot of stuff you can do there that you get for free.

[00:04:19] So yeah, highly recommend to get that workflow.