Introduction to Next.js Q&A

Transcript from the "Q&A" Lesson

[00:00:00]
>> Any questions on any of this stuff?
>> I do have one quick question. And it's totally possible you mentioned this and I just missed it. But in terms of the server of Next.js, is that node, is that built on top of the node environment. Where are the distinctions there?

[00:00:25]
>> Yeah, so the server, are we talking about the server for like your API, or are we talking about the server that like renders your pages?
>> I'm talking about the server for your API.
>> Yeah, that's node, that's all node. Next only uses JavaScript for everything that is heavily based off of something called connect.

[00:00:52] So if you look up connect to JS, you'll see this thing right here, that looks very similar to what we were doing or what the .use and the stuff like that. .use, .use, and just to even take it a step further, Express.js is what kinda made connect popular is heavily.

[00:01:10] Next.js' API functions are heavily built off of Express. So if you looked at Express and you did a, .get Let's see. Yeah, it looks well, there we go. It looks very much like this right, so you can do get. The only difference is we don't put paths on the next as ones because the paths are determined by the file name.

[00:01:39] So we won't put a path here. So we'll just put a controller that takes a request and response. So, it's very similar to express and that's why we're able to use the same middle wares that express can use cuz it's all based off of connects. So we can use, we can make our own middleware like this, or we can use installed middle ware that we get from NPM.

[00:02:06] All right, any other questions?
>> Have you used MDX at this at all are great those two were just I'm sure there's like plugins for everything or package to use it?
>> Yep, yeah.
>> [INAUDIBLE] do you have any experience with that?
>> Yeah, so you can use MDX with Nnext.

[00:02:30] There's an official supported plugin that the next team creates with MDX uses remark, just the same typical stuff you would normally have. And basically, you can just make .mdx or .md files. And it works the same way that you would expect that you would just make an MDX file.

[00:02:48] And it's gonna create a page out of that. So yeah, it totally works just fine. I think that's kind of like alluding to the thing that I really wanted to talk about was like jam stack stuff. So I'll talk a little more about the jam stack stuff too.

[00:03:01] Really isn't like a lot of code to show you is more just like a philosophy in the direction that next is gone. So I'll get there but yeah, you can use the MDX plugin. But any other questions?
>> Have you deployed a large app like a news site like a large static website and are there any pros and cons for using it?

[00:03:28]
>> I have deployed well over like ten websites that all each have had minimal hundreds of thousands of pages. And I've done that probably the last couple years in all the different technologies, some with Angular, some of the React, in some using View, I've done too with next js.

[00:03:48] And that next as was the most pleasant experience out of the box, we found ourselves not wrangling with the framework itself. Whereas with other frameworks, a lot of the effort went into getting the framework to do the job. Whereas next js kind of did it out of the box.

[00:04:04] Obviously, some of the biggest I wouldn't say issues that we have with next js as when deploying to shoot sites was just figuring out the right strategy of like build time is just like, okay, how do we want to build these things? Do we want to wait for them?

[00:04:22] Do we want to optimize this build and then how can we optimize that build and I think that's something you're never gonna get right? Cuz there's always trade offs. I mean, when things get big time goes up. That's just how it is. But next js is working on something that will help with this, and it's called incremental builds.

[00:04:45] They didn't have this when I was building all these things, but they do have it now. So it's in beta. So the incremental builds are ridiculous. Basically you can update your get static props or your decided pass and you just added props to basically use this is something called still wild while revalidate and I'm sure you've heard this before, but this is also what they're SWR hook, client facing libraries based off phone.

[00:05:16] So I highly recommend looking at what still while revalidate is. But basically what it does is if new content comes in, it will route go get that new content and regenerate the page for the content without having to get all the content ahead of time so that way, you don't have to do a build.

[00:05:33] And do every single page at build time, you can just say I only want to do a little bit and then I want to get the rest later. It's very much similar to the fallback option on a git static paths, but it's doing it, it's basically the difference between the two.

[00:05:51] I think they talked about it here. Yeah, fallback option to yeah, so this fallback option allows you to add new pages at runtime. But I think the difference here is that you can do, you can update the content after you've already like built the site. So the site can already have been built, and then they will go fetch the new pages, whereas I think the fallback one has to be rebuilt.

[00:06:13] So, it's a little different. It's super amazing. It's in beta. We're actually using it right now as an integration with our technologies. So, yeah. And then Guillermo, the CEO of next day as a girlfriend of mine, tweeted a demonstration of how they were able to. Basically show next js scale to 500 new pages 500 million pages a day.

[00:06:38] So infinitely. So if you have a website that's more than 500 million pages, then maybe you might have a problem but he was able to do it for 500 million pages and it works just fine. So I think you'll be fine.
>> So since you've been going or extolling the virtues of next js this entire time, are there any downsides or drawbacks or areas that you think that next and improve on?

[00:07:12]
>> Yes, yes. And I think this is where it comes to jamstack. I do think next js needs to improve with their [INAUDIBLE]. They know that too. That's kinda where these features are coming from. So when I think of jams, I think of content being up to date all the time and obviously incremental static regeneration helps with that.

[00:07:34] But also for a developer experience, just being able to edit content and see it change in real time would be really cool to take an example like for instance Gatsby. If you have a really good Gatsby source plugin that they say, hey, this is a certified plugin, especially with a CMS, you can be sure that when that data changes on that CMS, it's gonna change right there on your Gatsby site like it's gonna happen immediately.

[00:07:56] You don't get that with other static site generators, like next js, or. Almost anyone, you just don't get that gas is kinda like the first one that does that. So out of the box you don't really get that with next either. Can you make it work? Absolutely, next js also has a preview so they have preview mode which kind of helps with this too.

[00:08:21] And you can set up a preview mode where content is in a draft state and you can preview that content. But still, there's this a little more work that has to be done and I think they're getting there but the experience isn't there yet, but needless to say, even though they're getting better at it, it's really good.

[00:08:40] I actually prefer what next js is doing anyway because to me the overhead of having to understand graph qL and stuff can be quite difficult for someone who's already tasked with doing something like a static site generator today. And integrating with a headless CMS like now you got to learn graph qL, it can be overwhelming if you don't know it or care to know it.

[00:08:59] And then the whole team is invested. Now the whole team has no graph QL. So it's kind of a big investment to get into something like that. Whereas next js is just JavaScript. And at the end of the day, I think next js assets approach and even just vs approach in general is like, hey, we're gonna do one job and we're gonna do a well.

[00:09:15] And the company is gonna rely on the community to help us come together and make this product better, right? Next.js and Vercel is positioned well to work on a CMS, right? Their whole product could use a CMS. But instead of making one, they're just partnering with every other CMS out there.

[00:09:31] Same thing with Gatsby, right? They partnered with CMS and stuff out there as well. Because it doesn't how their position but next js, it's like well, if you guys want me some jam sec stuff, there's some really cool stuff out there. So one of them is called source bit.

[00:09:45] So source bits really cool and it's an open source project made by a company called Stackbit that right. So stackbit is actually really dope. So source bit what it does is it basically takes that thing that Gatsby does where like, allows you to update your website in real time when content changes without a refresh without anything.

[00:10:12] It does that. And as it's any static site generator, basically you can add it to anything including next js. And basically it sits in the middle between like a CMS and your framework. And it, it makes sure that, the CMS has some incoming data. It'll update your framework with a web socket and you'll get the new data instantly.

[00:10:29] So you get a really nice developing experience. The CEO of this company has a nice video talking about it. But yeah, so you can use this with next js which is what we're gonna be recommending people use and what we will probably use until or if next js even support something like this which honestly.

[00:10:45] I don't know if they should because the community is very capable of doing it themselves and it takes the heat from having next js have to do everything themselves which, just do one job do it well. So yeah, check that out and then stack bit, which basically you want to launch a jam stack website with a on site editor to edit content on the page but also connect to any CMS that you want it stack that you can literally click in here and like I want to start with this sites, you click here.

[00:11:12] You pick a static site generator that you once, you pick one, you continue, you pick a CMS that you want. So, boom, and then you connect it and then it just deploys it for you and you're ready to go. Like you don't have to do anything. So different stuff like that.

[00:11:27] But yeah, I would say that's probably a downside with next if it is a downside is that. They're just they don't have that experience yet. It's kind of disconnected, but it's coming together with actions by them and actions by the community. So, yeah, and other downsides, I would say.

[00:11:45] I think by default, the fact that you have to deploy to a node environment might confuse some people cuz they come to next js think it's like it's just a static site generator, like Gatsby and then having to like, we got to deploy this to like some node thing.

[00:12:07] I think that kind of confuses people. So but I mean, they do a good job of documenting and clearing it up as well if you just follow along. So I would say that is a thing. I've often run into that with people thinking that is a static site.

[00:12:19] And it's not a static site generator. And it's not just that. Other than that, no, I mean, I think they're doing a really good job. They're working with the Chrome team to add in, like, support built right into Chrome to make next js even better. So literally the team at Google is working with the team that next js to make next js like the framework for Chrome almost.

[00:12:42] And they're doing some really interesting stuff there. Especially around react, suspense and stuff like that. So a lot of stuff is coming soon to next js and Google Chrome. So I think they're doing a really good job.
>> When is the advanced next year's course coming?
>> You guys got, Mark has to answer that for you.

[00:13:05] I don't know. If you guys keep asking for it, it'll come.