Next.js,10.2, let's talk about this, so Next.js 10.2 version is out.
You know, if you have been following Next.js, they do absolutely crazy releases when they do a major bump, and that is from 9 to 10 and, you know, somewhat good releases, I would say, you know, consisting of a pack of features when they do a minor update, although this is technically not again, following semantic versioning, because I believe there is no , you know, from even for this, for the most part, there is no breaking change as such.
But there are a few things which we need to consider while working with next.js standpoint.
Features of Next.js 10.2 :
- The very first is of course the Fast Builds which provide reliable live-editing of code in your project and now it has been increased up to ~60% faster.
- The second one is Faster Refresh time which is now approximately 100 millisecond .
- Third one is the Faster Startups up to ~24% increased
- Fourth one is the Improved Accessibility of routes changes.
- Fifth one is More Flexible Redirects and Rewrites.
- Sixth but not the least is Automatic Webfont optimization which will we generally helpful majorly for SEO .
All right, so what's happening in the Next.js 10.2 ?.
Let's discuss. First of all, we have faster builds, up to 60 percent, faster subsequent builds with cashing. We have faster refreshers. That is like a whole lot. If you think about the response time for every single refresh we have faster start up. We have improved accessibilities, more flexible redirects and rewrites, the right and automatic phone optimization. And out of all these, the most exciting part for me are, you know, as is this faster startup and I would say this Automatic Webfont optimization.
And let's get into a few things. So first of all, webpack 5 is here and next.js has not dropped support of the webpack 4 yet, but webpack 5 is a little tricky to work with, even if you are using next.js 10.2 because next it has actually removed the Webpack dependency and they resolve it on runtime. What does that mean? Actually next.js has dropped Webpack as a direct dependency in 10.0.6 .
So this happens because next.js 10.0.6 and further introduces us support for dual loading of the back. That means now you guys have support for both four and five and they do not include an explicit webpack dependency, therefore requiring webpack call fails .
And it is possible that your webpack 4 configurations might not work with webpack 5 five if you are using some custom magic configurations. Right. So that is a point you need to take care about.
But once you do upgrade and once you have enabled Webpack five, you get all these benefits of gashing fast, refreshing and gashing and basically three shaking. Right. So there's that.
Startup performance improvement
Then we also have startup performance improvement, which is pretty sick if you think about twenty five percent improvement in boot time that a school. So three point three to two point five seconds, you might notice that. Maybe once a day, obviously, when you're starting off, you're server, but, yeah, I'm more excited about accessibility.
Improvements is also a great thing which has been introduced. And you can see this is how it will look and work like where you would have some hints coming on the screen.
Header , Cookies and Query Matching
Header, cookie and query matching for rewrites, and again, I have not personally used redirects a lot, but there might be a use case for redirects when you are doing some major path changes and you want to maintain your SEO juice or something like that. But that way now you can make it work like this on matching on user-Agent or header values or cookie value.
So that is pretty cool as. I can absolutely think of a use case where you just pretty much redirect somebody with a mobile phone to a different website. I don't know if this could be valuable. Right. Instead of client-side redirects, you can do Server-side redirects like this and automatic Webfont optimization.
So this was actually possible next.js . There was a plugin called next-font optimization. I guess it is still there. I don't know. But what these guys do now is that they will take up your link from Google API is currently Google APIs is the only font provider which they support officially and they will convert it into this. Now, you might think, why is the step necessary, what this will do? Well, all of them mentioned here, but this is all related to improving the core web vitals.
Basically Core web vitals is a set of vitals. That is a set of few things which Google has formulated. And they believe and it's actually true as well, they believe that these three factors loading interactivity and stability of the content is super important for the user. So they have basically quantified how our user experiences a website and have broken down in it into some factors which you can analyze, Google can analyze.
And Google is going to go hard on SEO from, I guess, May or June 2021. I don't remember the exact month, but they are going to go super hard on core web vitals and even ranking websites. Right. So it's good time. It's a good time to be using next.js and it's a good time to be using next.js 10.2 . Do as well where they would just, you know, just keep on improving code web vitals for you, for free, essentially for free.
So you don't have to do anything. It'll automatically happen on your behalf.
That was a short recap of all the Next.js 10.2 features. I wouldn't say that there's something very fancy released, but at the same time, it is good to see that Next.js becoming super-fast.
I mean, these guys release super-fast compared to anything which I have seen, bringing in a lot of features and a lot of things. And that is like that is one of the reasons I love Next.js .
If you are working as an indie developer with a framework like Next.js, it almost seems like you're not an individual developer because you cannot get so much so much done with a framework like that.
So, yeah, that's pretty cool time. It's really good to be an indie about indie hacker, whatever you want to call yourself, and the extended support, the quick iteration and a solid Vercel platform to back it up, which has a good amount of funding. So thankfully, we know that Next.js is not going away any time soon. Not everything just instills a lot of confidence in the company and in the product.
What do you think? What is your experience with Vercel or do you prefer modify or anything else?
Let me know in the comments below. What is your favorite Hosting provider, whether it's Vercel , Netlify , A.W.S , Digital Ocean or something else.
That is all about Next.js 10.2 updates and feature. I hope you enjoyed reading this article and if you have read till here then thank you so much for your patience reading.
If you are interested in reading more articles of this type then you can subscribe to our Newsletter Subscription which will deliver you the latest articles posted by me straight into your mail inbox.