Hasty Treat - Next.js 12

Monday. Monday. Monday.

Open wide dev fans. Get ready to stuff your face with JavaScript, CSS, node modules, barbecue tips, get workflows, breakdancing, soft skill, web development, the hastiest, the craziest, the tastiest TS, web development treats coming in hot. Here is Wes, Barracuda, Boss, and Scott, El Toroloco, Tolinski.

Welcome to Syntax. In this next episode of Syntax, this hasty treat, we're gonna be talking about Next. JS version 12 and all of the hot new goodness that came along with Next. Js version 12. My name is Scott Talinsky, I'm a developer from Denver, Colorado. And with me, as always, is the Wes Bos.

Hey, everybody. Hey, Wes. How's it going? Good. Excited to talk about Next. Js 12. It's got not like a Not a tasty amount of updates, but a hasty amount of updates and some really good updates I'm excited about. Yeah. The amount of updates, We'll say is tasty,

but the quality of the updates is definitely tasty. Now what's definitely also tasty is 2 of our sponsors today, and I'm talking about Sanity and LogRocket.

Wes, do you wanna talk about Sanity, and I'll talk about LogRocket? How about that? Sanity

is your structured content editing experience.

It's not just a CMS.

It's a Scott just dropped his snack and brushed it off and continued to eat it.

Okay. Back to Sanity. Sanity, it's not just a CMS. It's a entire content platform that enables better editing of your digital experiences. What does that mean? Well, you can set up Sanity with your Schemas, all of your data. You can get your relationships, all of your input fields. You can relate those things to each other, and then the whole editing experience on top of those schemas is excellent. A. You can have your editors follow processes. You can, send things for approval. You can additionally put fields in there. It's an awesome I'm gonna say it's a CMS.

It will do all of your images for you. You can integrate it with another one of our sponsors, Mux, which does your video, which is Awesome. So check it out. If you are building a website or an app and you need a content platform, check out Sanity. I urge you. Sanity dot I o forward slash Syntax.

It's gonna get you double the free usage tier. Thank you, Sanity, for sponsoring.

If one of your users Metaphorically drop their snack on the ground, brush it off before eating it, then you'll probably wanna make sure that you can find whatever that metaphorical bug is in your site and with the service called LogRocket. Now LogRocket will do exactly what Wes just saw and got to see me brush that Snack off. Get to see it with his own eyes, and LogRocket is a service where you can see with your own eyes all of the bugs that are happening in your location because as they happen, it records a session replay, which allows you to check out the network request, the error logs, and so much more While a user has committed some atrocity on your site, and now you can actually figure out how they did it, users said they come to you and they say, oh, this the site turned blue. What'd you do? Why is the site turning blue? And you say, oh, silly. It shouldn't have done that. You must have done that. And then you can watch in horror as it turns out that Their valid bug is actually a valid bug and something that you had done wrong because now you can see all that with confirmation video and more. It is so super cool, so check at logrocket.comforward/syntax.

Sign up today and get 14 days for free. Seriously, watch their video. Watch their marketing stuff. This is one of those services. See, you gotta see it to believe it. I'm definitely a big, big fan of visibility in tracking down my bugs, so check it out log rocket.comforward/syntax.

Alright.

Next, let's get into Next JS and all of the hot new updates.

Now Next JS has been cruising along, and they they come out with new stuff all the time. But this is Next. Js version 12. It's a major version of Next, and it includes some heavy hitting performance and optimization feature. So the headline feature, I think, for for a lot of this stuff is the new Rust compiler.

Now SWC is a TypeScript and a JavaScript compiler that consumes JavaScript and TypeScript And, basically, we'll just spit out JavaScript for the browser to read. Now it's very fast Is is really one of the the key components of this thing. Now we we've been seeing a little crop of some of these new tools come up, and SWC has Been being worked on for a while now, so it's really, really, really interesting to see that Next. Js is shipping with SWC for 3 times faster, Fast refresh and 5 times faster builds,

so very fast stuff coming out and utilizing Rust, which Feels like a very modern way of approaching the problem. Yeah. So what does this replace in Next. Js? I'm assuming that Babbel. This replaces both Babble, which Babble used to take your JavaScript and convert it into other JavaScript. So if you had things like experimental features Or in our case, it j s x that needs to be converted to JavaScript. It would do that. SWC also does that, And it is sort of a Babble alternative.

It does most of what Babble does, but if you still have, like, some, Like weird stage 0 or stage 1 babble plug ins, you might not want to to use this. So this Also, if if I'm correct, this also will replace a Webpack, or is this used with Webpack? I think we've talked about this before. I just forget. This is just for JavaScript, so I would assume it does not replace Webpack. Oh, yeah. Yeah. It says, we've made numerous improvements The web pack including optimizing fast refresh and making on demand

Yeah. So this isn't touching your CSS, your You need that stuff. It's not handling your fast reloads. It's not handling that stuff. It's simply just all of that. Compiling the JavaScript. Yeah. Okay. Makes sense. And then the the fast refresh is still done via webpack. That's awesome. So really, really excited about that. I remember we talked about

this type of thing happening in Next. Js, And here we are. The next big thing, and I'm really, really excited about this, is that they've introduced a concept of middleware.

So If you've never used middleware before, it's very popular in JavaScript world, in Express world. Most Other frameworks have a concept of middleware as well. And in fact, most frameworks use this thing called connect middleware Mhmm. Meaning that you can just share middleware packages between different JavaScript frameworks like Express or Fastify or does Fastify have middleware? Yeah. Fastify has its own. Yep. There you go. So with the idea with middleware is that when you have a request going into your node server, you're able to sort of intercept that request, Do a little bit of work and then carry on that request down the line, and you can do things like make sure somebody is logged in. You can do things like make sure somebody has a role or permission if they're logged in or not. I specifically use a middleware to make Sure. Somebody is logged in before they hit any of the API endpoints.

They have other examples here, logging, AB testing, server side analytics, Redirects.

That's another good one is if somebody were to visit one of the URLs for my videos directly and that video is private Unless you're logged in, then I'll just redirect them to the the login page. So my course platform runs very heavily on middleware.

And when I saw this, I was like, Maybe I could pretty easily move over my platform from right now, it's just a, express Single process.

I could move that over to Next. Js and, like, I that wouldn't change any of the code that I I have written because it's It's still JavaScript running on Node at the end of the day, but it would all be in one nice little package. So pretty excited about that. Very excited about that. Yeah. Same. Next up is React 18 support. We did an episode on React 18. If you've been paying attention, React 18 is It exists. It's in some sort of, you know, a prerelease

era, prerelease phase.

So next step is that It supports React 18.

So underneath the flag, you can use React 18 APIs. Now React 18 isn't stable yet, but if you want to give these things a try, you can. And it seems like you can enable various React Eighteen features independently.

So, for instance, if you'd like to enable server side streaming, you can enable Concurrent features. There's React server components, which you can enable or disable.

I haven't used React server components or anything like that yet. As intense as I am about trying new stuff, I I still kinda just wanna wait until these things are all Yeah. Complete before going ham on them. But the support Word is starting to come in now, so that's pretty neat. It's almost a year now that React

announced server components and server side streaming. Yep. And I remember Next. Js showed a demo of it, and we're almost a year later now. We just Starting to see the peeking head of being able to to try this kind of stuff. So previously, you had to install, like, a custom version of Next. Js, I believe. So that's it's good. This React stuff, I've learned to just, like, sit on my hands and wait for it to actually come. Yeah. Because with suspense and server components, They announced it, and then 2 years later, it's we still don't have it. So they're working in public. It might not have ever be a thing, I've learned. So I just sit on your hands and wait for it to come out and then start using it. Yep. Totally. Totally. Totally. Totally. Totally.

Next one is AVIF, a v I f support in their image component. So I think It goes Next 11, they announced an image component, which was one of the killer features of using Gatsby. Mhmm. Which is sick. Awesome. Groundbreaking. It's awesome. And Gatsby always had support for AVIF, which is very, very small versions of images.

And now Next. Js has rolled that out, and that's really exciting to see. Yeah. So who can actually consume

AVIF? It looks like Firefox has a version 93, And it looks like Chrome has a version 95, and I bet you'll all be able to guess that Safari, of course, does not support it Along with IE, surprisingly, Edge doesn't support it. I don't know if the hell that makes any sense, but it doesn't. Yeah. What the heck? Yeah. It's weird because, I mean, Edge is Chromium based, so you you feel like if all the other Chromium based browsers have it, then why doesn't Edge have it? But that's interesting. And, Of course, if you know anything about how browsers work on Ios, since Safari doesn't have it, they all don't have it because all the browsers on Ios are Safari.

So you don't get it on mobile, which, honestly, is the place you're probably gonna want it the most, unless, of course, you're on Android Using Chrome for Android or Android browser or any of them except for Firefox for Android. Doesn't either. We should say that you, as a developer,

Don't really have to sweat these details. You just use the image component in Next or Gatsby or whatever framework you're using, and it'll be figured out. It will fall back to a JPEG. That's that's the beauty of using either a service like Cloudinary Imajix or doing it generating them yourself with one of these frameworks is that they will always fall back to, at the end of the day, a JPEG or a PNG if WebP or AVIF or any of these modern formats are not supported. Yep. Formats, man. They've just been a world of unsupported

formats for the entirety of being a web developer. It's like, This is one thing that you will never get past is how can we just get the best format supported by all the browsers the fastest, please, Especially with media.

Okay. Cool. Next is going to be the bot aware ISR fallback. Wes, do you know anything about this? Because I don't know anything about this. Yes. It stands for incremental static regen in. That's what ISR is. And the sort of the idea is that when you're visiting a page for the first time, That page will not be rendered yet if you're doing them render on demand. So if someone visits a website, a. Then they see a loading screen because that page hasn't been generated yet. And then the next person that comes and visits it, then it will have been generated. And that can be a bit of an issue with Google bots because, like, if Google visits your page and just sees loading then it will index that. So they will be able to detect web crawlers And wait for those things to fully render before they get sent out. So that's another good use case for, like, this whole, like, JavaScript and SEO continues to get easier. It's still not there yet, but that's another step in the right direction, I believe. Kinda feels like just, like, solving a bunch of problems that We created. You know? Yeah. Hey. Hey.

Let's just make a bunch of problems and then solve them. Yeah. Yeah. That's the web developers.

Yeah. Alright. Next 1 is going to be native ES module support.

So now everyone gets to get the joys of working in An e s m environment where suddenly things just complain at you for no reason, so that's great. As somebody who's been in the e s m for, like, a little while here, it's A little rocky. You will run into issues, but, you know, the best part about everything getting native ES module support is that The more things that have it, the less issues we're gonna have because the more people using it, the more bugs are gonna pop up and the more Weird packages are just gonna stop working and stuff like that. So, yeah, shout out to ES modules. Happy to have the support here for that, and let's just hope that That transition gets smoother and smoother as I'm sure it will. We need to do a website of, like, where are ES modules in the node

system right now because Oh, man. It's hard. Yeah. It's hard. And it's not like there's a lot of people that complain about it that don't understand the complexity of the ecosystem, so So maybe we should do 1 in terms of, like, we know it's hard, but this is where it's at, and this is how you can sort of approach your your projects Either using or moving over to ES modules.

Yeah. Totally. In terms of, like, frustrating types of issues that you can encounter in the web, This is a new one for me in terms of being ultra frustrating. It's this, anything where, like, a common JS package won't load inside of an ES module situation.

That and the GraphQL more than 1 version being loaded errors are, like, the bane of my existence, and I will just decry anytime either of those pops up. Next one is URL imports. So,

this is, like, the first step to being able to import things that are not in your node modules directory, but just Import them from a URL, which is part of the ESM spec, meaning that you can import whatever from h t d p colon /, and there are lots of different Websites that host ES modules. Skypack is probably the biggest one. JSPM, Unpackage.

There's a whole bunch of different ones out there, and that's kinda Citing as well that you have no npm install time. You just simply just import it from a URL, and it will go off and grab it when it needs it. Yeah. I wonder how this will end up working in practice. You know, I think it could be really, really neat to have these this functionality here. I I wonder In which cases is it gonna be really super usable? I'm curious about that as well because, like, a lot of people hate the Huge node modules directory and and the problems that come along with that. And, specifically, my little story here, I I got my new MacBook, and I tried to just time machine restore from it. And because I had, like, millions and millions of node modules files on my computer, it was telling me Sixty hours to move this thing over because moving 1 file over at a time, even if they're small files, takes a lot of work. So what I had to do is, like, scrap the whole thing, and then I deleted something like 30 or 40 gigs of node modules on my computer. And then I moved it over in a couple hours. It's much faster, so there's that pain of having to and then also needing to MPM install the correct thing. Yeah. It will be nice to just Import the thing. But I also wonder, like, how do pure dependencies work with that? You know? I don't know. You know what Matt Matt Perry from Framer Motion, Fame, he he said that it's really exciting for them for, like, demos to being able to pass along a demo with, like, versions Yeah. That's a good point. Like, Just import whatever from you. But, like, you can I guess you can lock things other But if you're just, like, sharing a file or sharing a, Maybe it's better copying and pasting into REPLs and stuff? Yeah. Yeah. That's true. I'm just sending somebody a single file to test something. Yeah. Alright. That is Next. Js 12. Really, really exciting. As always, next updating Next. Js is very, very painless. If you keep up to date with The there's usually not too many breaking changes here or there. Updating is not a big problem. I've always been very happy updating my Next. Js applications. Not a huge big deal. So check it out. NPM update everything, and you'll be,

ripping on Next. Js 12. Yeah. Yep. Ripping. Ripping. But, yeah, the we will see you on Wednesday for a potluck episode of Syntax. Catch you then. Peace. Peace.

Head on over to Use syntax.fm

for a full archive of all of our shows. And don't forget to subscribe in your podcast player or drop a review if you like this show.