Building for Deployment to Vercel

[00:00:00]
>> Deploying, so TLDR deploy this thing of Vercel. I'm just gonna be honest with you just deployed there. They built the framework. They built the infrastructure to support the framework. If you want everything has to work out of the box without anything, deploy there. If that's all you take on this deployment thing, that's all you need to know, and we can walk through deploying something.

[00:00:22]
But just to walk through how that works, like I said, in the package.json, you have these commands, right? You have build and start. Let's run that so I can show you what that is. So if I run npm run, build and npm run start, you've never seen the double ampersand, at least in OSX and Linux, that just means run the thing on the left, and when that's done, run the thing on the right.

[00:00:44]
You do one ampersand or to run them both in parallel. So I'm gonna build this thing and then I'm gonna start this thing. And this is exactly what would happen in production. You're gonna build it and it's going to break because it doesn't like the fact that I have all these TypeScript errors and stuff, so that's okay though.

[00:01:03]
I can show you something really cool that you can do. [LAUGH]. Let me get rid of this spot thing. So what you can do to ignore a lot of that, you can say TypeScript and you can say ignore build errors. And then you can also say eslint, can you also shut up, and do that too.

[00:01:23]
It will ignore both of those, so, hopefully, that allows us to build something. So we'll try to build this again. If this builds, we'll see how next, there it is, it did before I could even say it. So, of course I get this, it failed. Don't start because I'm already on 3000, but that's fine.

[00:01:43]
But what I wanted to show you is this part right here. So if you look, here it is. So if you see, if you have a circle next to one of these pages, that means it's a static page as in it was automatically rendered as static HTML. Uses no initial props but if you have this Lambda thing next to it it's a server side and renders at runtime as in when someone goes to it or render.

[00:02:06]
Looks they forgot to update their outputs here or maybe I forgot to know this doom, this is this is no longer a thing, get initial props get service high profit that doesn't exist anymore, but let's just look at some of these pages. So, you can see if I try to go to home, it has a circle next to it, which means it's static, which means this is always going to be here.

[00:02:29]
If someone tries to go to home when I deploy this, it's never gonna hit the server, it's just gonna show the cache version of this every single time ever, and until it changes. So how did you know that? Well, it's really smart because I don't have anything here I don't have any props here I'm not doing anything here there's no promises being returned, there's no data being fetched, so it's, you're not using cookies, you're not using fetch.

[00:02:55]
This is a static function, this is in knows that nothing's ever gonna change about this because everything that I could do to make it dynamic they've already hooked into and know when it's being used. So because I'm not using it, it's you're not doing anything. So there's no way this is dynamic.

[00:03:13]
So we're just gonna just keep this static, and they're right, I'm not doing a damn thing with this function, so it should be static. API to do. Okay, clearly that's literally a Lambda function, so that's always gonna be Lambda. This docs one, this one is also dynamic. And the reason this one is dynamic is because we have these spread paras here and we didn't use something, cuz we didn't have time to talk about it, but I'm gonna show you anyway.

[00:03:39]
We didn't use, where's my repo? Here we go. We didn't use something like this, generateStaticParams. So if we were to use generateStaticParams to get every single route that we would have used ahead of time, in this output, we wouldn't have just saw this, we would have saw all the other routes that got generated from this.

[00:03:57]
So let's say I had 10 routes that were gonna be in docs, right? I had ten different docs pages, and I knew what they were ahead of time. And I used generateStaticParams to return an array of those ten URLs. You would see all ten of those URLs here, and they would be static.

[00:04:13]
But because Next.js doesn't know what these URLs are, because we didn't generate them statically ahead of time, this has to be dynamic. It has to render every single time because this parameter can change so this is a dynamic page, this is also static it's a favicon. So todos, todos is dynamic, and why is todo dynamic?

[00:04:35]
>> Was it the hooks that you used in here?
>> In todos, there is a component somewhere in that tree that is using hooks. So yes, there's some client-side stuff in there. That's a good one, yeah. Which means every time you see chunk, this is client-side code. So it generated four client-side files.

[00:04:56]
So that's a good one. What about another observation. What are we doing in todos? What does that page render? What does it show?
>> Setting it to a completed.
>> Setting it to completed? Yes, that's client side, exactly. So somewhere in that tree we are using client side hooks.

[00:05:16]
That is true. We had to use that use transition hook, which is client side. So that's that's one of these files somewhere. What about the todos page itself? What are we doing in that page?
>> Getting the data from the database?
>> Yeah, we're getting the data from the database.

[00:05:32]
And that has to be dynamic every time, right? So every time we go to the todos page, we want every time I refresh this page and go to it, t's not started right now because I stopped it obviously, but I wanted to go to the database and get it every single time.

[00:05:46]
I'm not using React's built-in, fetch, so it's not caching. I'm not manually using the cache function that they give you, so you can cache it yourself. So it just has to get it every single time. So I was, yeah, this isn't a static page, it's dynamic. Every time someone goes to slasher todos, we have to execute it on a server, again and again and again.

[00:06:04]
So that's why that's the case along with these client side JavaScript, right? And notice that this home page doesn't have client side JavaScript because it's a server function, right? Any server function that doesn't have client side JavaScript doesn't generate any chunks All these chunks are client side JavaScript.

[00:06:24]
All right, cool. And then right here is just some 404 thing that we didn't make. This seems it's created from next AS, you can override this, I believe. And then middleware is just an F, which I believe is something very specific to middleware and that's it. But yeah, you can kind of see how that works and then you can even measure of the JavaScript which is kind of cool of how that works.

[00:06:50]
Pretty nice. Okay, yeah, so once you do that this thing tried to start I'm not gonna try to start it cuz we already know it's gonna work what. Maybe I'll just maybe I'll just turn that off. And let's try that again. So I'm gonna start npm run, or in this case npm start.

[00:07:05]
So we're gonna run this in production mode, which honestly should do the same thing I tried to go to do is it's gonna break because of our middleware, and it's not gonna hot reload if I tried to save this. So this is what you would run in production.

[00:07:19]
So to deploy this, the best way to deploy this, I believe, is just by putting it on GitHub first, and then heading over to Vercel. I have a lot of stuff here. I'm going to make a new project. I'm going to say, let me go to my thing, I'm gonna type in intro here.

[00:07:43]
I have this one from four hours ago, and by default I don't have to change anything because it's going to detect, it already detected that it was Next.js, hopefully, they know that they made it. I can adjust the commands but I don't need to because there are other commands that I need any environment variables.

[00:08:02]
These are those secrets. So remember you have that .env file here that we added our database, our database, where is it? Here we go, this database zero. This doesn't get checked in to get, so this isn't in get somewhere. So I would have to add this to the environment variable here.

[00:08:21]
And most likely to be a different value if we had a real database. You'd have a URL that you use in development. That's probably some local hosting or maybe your team has money and it gave you a cloud database that you can just run rampant with. But whatever, it'll probably still be different than what you put here.

[00:08:36]
I don't actually think the SQLite will work, but we can try. I just hit Paste in here and it was smart to take the name and their value and separate that, without me going to separate URLs, that was pretty obvious. It pasted and did that. That's kinda blew me away I'm not gonna lie.

[00:08:54]
I feel every input should have that going for it, that was really cool. And then once we have that, we can hit Deploy. Again I don't think the SQL database, the SQLite database for work in production, but we're not gonna cover connected to live databases in this course.

[00:09:09]
You can watch the full stack course of that. But we can just look at the deployment here. So it's actually pretty simple, It'll go in, it'll pretty much run and the reason I wanted to show you those commands cuz I want you to see that's just going to the same commands that we did, right?

[00:09:22]
It's gonna do a next build, it's gonna literally do the exact same thing we did, nothing new, and this is gonna try to start it. So what are they saying? This set it broke because, we know I told you to, wait, this repo I don't have ignore tight grip on.

[00:09:40]
So as you can see, it doesn't like that, right? So it's going to fail. So, let me just let me just add this one then that way I don't have to worry about that, just let's just create a new one. So now let's go back to Vercel, and I think if you try to deploy it on the first time and it doesn't deploy, it doesn't create the project.

[00:10:00]
So it might be good there, but it looks I already found the new one I wanted. Everything is good here. Let's add our database thing even though I don't think that SQLite files will work in service environment. I could be wrong. I actually never. Try to use it.

[00:10:16]
So let's see. And we'll deploy that. So hopefully we get past our TypeScript errors and our ESLint errors now. I mean, if you're gonna use TypeScript yesterday, I guess you should listen to it but sometimes I don't feel I just want to deploy it quick. Yeah, so while that's building we can talk about the other deployment methods which would be self-hosting.

[00:10:41]
So if you're self-hosting you can use a docker container to get a lot of the benefits that you would get from Vercel. A lot of the platforms do support a lot of these things, like AWS, EC2, DigitalOcean, Droplets. You just need, there's a Next.js, official Next.js Docker image that you can use to have that.

[00:11:05]
There are other not fully managed app providers like Vercel, but kind of like a half-step. For instance, app platform on Digital Ocean, I've used that before. Heroku, I'm sure people have heard of Heroku. You got Railway and Render, both of which I use and both are really cool.

[00:11:23]
You can deploy on those as well and for the most part you'll get most of the benefits. You can even deploy this thing on Netlify, which gives you pretty much all the benefits that they have, I think didn't have like a pretty good partnership and things going there.

[00:11:35]
So, it really just depends on where you deploy to where you would get, but I don't see a reason why you would deploy a Next.js app anywhere other than Vercel, in my opinion, since they created it. So, I would just do that, you'd probably get some of the best benefits.

[00:11:50]
As far as things like middleware working on your own self-hosted deployment, well, because you probably, unless you set up some edge compute yourself, or some hosted managed platform that you deployed on has that, then by default you wouldn't have that. The sweet thing is that Next.js, they've opened up their build command to work for any single framework and any single hosting provider.

[00:12:15]
So any hosting provider could implement that to support your Next.js app. I forgot the name of it, but they announced it sometime this year. So you would have to make sure that that hosting provider supports it, and not everyone is gonna do it. But I think the biggest managed ones do, like Netlify, Railway, Render, places like that.

[00:12:36]
But again, just put it on for sale, in my opinion. So, okay, let's see what we got here. So now we have, let's cache this case, at least, Prisma. Okay, now it looks like Prisma doesn't like it. Okay, now it wants me to run. Prisma, this leads to an outdated Prisma, Prisma's auto-generating isn't triggered.

[00:12:59]
That's funny, I've literally never seen that error before. So, luckily for us, we don't have to change the code to get this to run. It looks like they just want us to add in a new build command. So we can just go here, we can run. Let say npm run build and then npx prisma generate.

[00:13:31]
Let's try that. Or so let's do that. Cool, okay, and let's try that again. Deployments, but yeah, any questions on deploying things in other environments for Sale, Railway, Runway, different stuff like that?
>> Can yo do the same generate first then build.
>> Yeah that's what I just did.

[00:14:03]
Hopefully, we'll all get there. I didn't know that was the thing. I mean, you have a specific page just for that. That is crazy. I honestly would, it's really what I just typed in. Npm run build hours, I mean it's same thing but that's crazy, honestly, I've never seen that.

[00:14:26]
I have deployed prisma to this, to Vercel, I have never seen that before.
>> [INAUDIBLE] get to the conclusion that the doc's provide on your own.
>> Yeah, it is. It is. It makes me think of the person that had to sit there and do it and go through that pain.

[00:14:39]
I'm sorry. I'm so sorry. Okay, it looks like everything got compiled and deployed and things like that. So it's looking good. Let's see what happens here. I realized I still had that middleware in there that's preventing us from going to the todos page. So I should have took that out, but we'll still be able to see the app deployed at least.

[00:15:02]
Cool, it looks the app is deployed. We should see some confetti here or something like that. There it is. Yeah, okay. You just click on it and you can go to your app. So here's our app. Our middleware is working because we can't go anywhere. We can't go to the todos, but there you go.

[00:15:16]
And then our APIs, let's check our APIs, which I guess this will test to see if the database works. I'm actually very curious. So let's say API, is it todo or todos? It is todo. Yeah, that's the database does not work in production with SQLite. So you can't do that.

[00:15:34]
You need a real database. But again, that's kind of beyond the scope of this course. We got to take the full stack course for that. But yeah, and that's how you would deploy. Obviously there's things to consider when deploying databases, Linting, Prisma apparently now. That you have to consider environment variables, stuff like that.

[00:15:54]
But if you wanna know more about that, we'll cover that in the full stack course. Cool, any other questions with deploying?
>> Many, so this person says, any of my customers who want the Next.js app have their current ecosystems either in AWS or Azure or even Netlify, could you speak to any concerns or challenges?

[00:16:27]
>> I think you're gonna have tons of challenges if you aren't on Vercels or Netlify. I know for sure Netlify is pretty feature consistent with Vercel seeing how they're their own two biggest competitors, but they're also very friendly with each other as far as like being able to support each other's technologies.

[00:16:43]
So they're Vercel, you can probably get away with that. AWS, it's AWS, the thing is, is that all the infrastructure is there, and you should be able to leverage that infrastructure on top of AWS. I would not be surprised if there isn't a TerraForm script or a Docker container or some AWS Cloud Formation config that isn't already written to support everything that you need for Next.js.

[00:17:12]
The only problem is it's probably lagging behind any updates that next days might be happening. So see how next GS13 just came out. Some of the stuff might be out of date. So you got to figure out yourself or hope someone else does it for you, if you're not a DevOps expert, but I would imagine that it wouldn't be lagging too far behind.

[00:17:30]
So those might be some challenges you see there. Whereas if you deployed like Netlify or Vercel, you probably just get that support out of the gate immediately. So yeah-.
>> There is one in chat suggested SST which supports deploying Next.js on the AWS infrastructure.
>> Yeah, SST is really cool.

[00:17:48]
I've actually used it a few times. So actually I know a lot of SST, so lady we have her here deployed next year is about Astro. Yeah, I guess the thing is, it's you can use this cuz it will deploy things for you. But like I said, if new features come out that require new infrastructure, there's no guarantee that something other than Verscel is gonna have that as soon as that new feature comes out.

[00:18:13]
Vercel, they won't launch a new feature in Next.js that requires new infrastructure if they haven't already made the infrastructure. And I would imagine they have really good partnerships with a lot of these folks where they tell them they're announcing new infrastructure, but that doesn't mean it's on their priority roadmap to go update some thing because Next.js or Vercel asked them to.

[00:18:34]
So I would imagine there's probably gonna be some consistency eventually. But if you want something right now, you might just have to wait, you might. It could be up to date, but maybe not. But yeah, SST is actually really cool.