Vercel recently released Next.js 10 which closely coincided with the release of React 17. Here's what these announcements mean for you.
Our instructor Kevin talks about the key changes in React 17 and Next.js 10.
At the end of October I was excited to give a talk at NEXT.js Conf about the API routes in Next.js. It was called “Do you really need that server anymore?”
Next.js is an outstanding JavaScript framework developed and supported by the team at Vercel.
Built on Facebook’s React JS, it helps developers be more productive, faster and more efficient. I could talk for hours just about API routes - which you write as simple JavaScript functions. Then, on deployment they are spun up as serverless functions. Amazing!
Vercel announced their latest major release - Next.js 10 - which closely coincided with the release of React 17. Here's what both of these announcements mean for you...
The tldr for this is that on the face of it, React 17 didn’t really see many new features added. There were a lot of 'under-the-hood' improvements though, which will make future development easier and more straight-forward.
It is now possible, for example, to have two versions of React in your application. For instance React 17 for your new features and an older version for your legacy code. While it could be really handy in certain situations, you should tread with care as it means that two versions of React will be bootstrapped - it's nonetheless an interesting option.
Of the other things that were announced, the most interesting for me were the improvements in Stack Tracing. It can sometimes be challenging to pinpoint the source of an error, particularly in production. Browsers don't currently provide a way of getting the Stack Frame of a Function. React will now reconstruct a component stack when it catches an error - seems bonkers but amazing!
I found the Next.js 10 release a lot more exciting.
Built-in Image Component
Modern websites are primarily made up of three main components - JavaScript, markup and images. Next.js has always had a selling point of minimising the JavaScript sent to the user, and Vercel have achieved this in a number of ways. These include Server-Side generation, JavaScript bundling and code optimisation.
Developers can spend a lot of time shaving off 15kb from a JavaScript file. This benefit is all lost when a content editor drops in a 5Mb image!
Up until now we've used the canonical <img> tag for a custom React library for images.
Next.js now ships with “next/image” which can be swapped out as is at its most basic.
<img src="/image-file.jpg" width="400" height="400" alt="My really cool image">
becomes
import Image from "next/image"; <Image src="/image-file.jpg" width="400" height="400" alt="My really cool image">
The Next team has also worked with Google Chrome to help improve this component.
What’s the skinny?
I've already started switching out the image tags on some of my projects and have noticed the difference straight away. However, there is a more fundamental problem. If my image is 2000 by 2000 pixels, then that image is sent to my user's phone no matter the screen size available. Most of that payload is wasted and unnecessary.
The `next/image` component automatically generates smaller sizes. These are then served in modern web formats like WebP if the browser supports them, and are about 30% smaller than JPEGs. So it’s actually ecologically friendly too!
These optimisations are applied to images from any source, even if that is an external CMS. This happens on-demand meaning that there isn't an increase in your build time, whether you're shipping 100 images or 100,000.
You can find out more details here.
We live in a global world with users visiting our sites from lots of countries and speaking multiple languages. Are we losing visitors by not catering to them? Providing a localised experience is more likely to convert our visitors into customers.
So, what does “localised” mean? Well, it's generally built on two pillars - translation and routing.
The React ecosystem already has libraries that can help with the translation piece. There are also Content Management Systems that handle pieces in multiple languages. Prior to Next.js 10, the routing aspect wasn’t always easy - but now it’s a straight-forward process to provide a localised routing experience.
There are two main ways this is achieved; subpath routing (/en/blog, /nl/blog, /fr/blog) and domain routing (blog.com, blog.nl, blog.fr). These can now be setup in the Next.js config file by passing in properties to the configuration object.
Next.js 10 has built-in language detection based on the browser's Accept-Language header. Development teams are then able to redirect based on the language. You can provide a better experience for your users - and happier customers means more sales!
As technology improves, we live in an increasingly impatient world! A 2016 study from Google reported that 50% of your users will leave your site if it takes more than 3 seconds to load.
I build my sites on a powerful computer with an excellent internet connection - how about you? You can’t assume everyone has this luxury, so I test my apps by throttling the connection in my browser and use different devices (rather than just emulate via the browser viewport) to get a good understanding of user experience - but it would be great to have proper metrics to know if my site is working well in the wild.
Next.js Analytics is a paid product that has been released with Next.js 10. It measures the ongoing performance of your applications in the wild. You can get the entire picture and understand how your web application is being experienced by real users on real devices.
The Next.js team has been working hard with Google to support Core Web Vitals. When setup, these will be collected from your users in a private, anonymous and GDPR-compliant way. A live dashboard helps ensure that monitoring these metrics becomes central to your developer workflow.
Developing performant e-commerce sites is a key part of most web developers' work-life. Doing this in a way that builds on best practices and gets your users to convert into paying customers is sometimes challenging.
With Next.js 10, an all-in-one starter kit was launched which can be cloned and deployed in one step. It uses all of those awesome Next.js features we've talked about here. Next.js makes such a compelling offering. Image optimisation, internationalisation, analytics, server-side generation and rendering, incremental static generation and more. I really could go on all day.
Where next?
I'm bullish about Next.js and I hope you've caught some of my excitement if you hadn’t already. The JavaScript ecosystem has stabilised a lot in recent years and React is here to stay. The Next.js framework allows a lot of configuration and setup to be handled out of the box, meaning developers can be productive and achieve real-world results quicker.
Is your development team ready to use Next.js to make that upcoming web project a success?’
We can help you on your journey, with hands-on courses covering all the fundamentals to get you going:
