Next.js is a very popular react framework which allows us to build high performance, server-rendered, static, dynamic (or a mix of both static and dynamic applications). Originally released in 2016 by Zeit (now Vercel), Next.js has come a long way since.
Applications in React are fairly simple to get started with. However, often it is not easy to optimize them or make them performant. Add server side rendering, and suddenly complexities increase manifold.
Next.js abstracts out quite a lot of these complexities, provides a fantastic development experience, and with its opinionated framework, is often way more productive and performant, than applications written in plain react. Server-side rendering, code splitting, smart bundling, route pre-fetching, zero config, dynamic routing, statically generated, Google AMP (Accelerated Mobile Pages) support - all these complicated features have been gradually introduced over the years, and are much easier to implement in Next.js than implementing them in standalone react.
The newly announced Next.js 10 adds to the existing feature list by introducing new features like:
- Built-in Image Component and Automatic Image stabilization:
After focusing on drastically decreasing Javascript bundle size, without any code changes, in their new version 10 release, the Next.js team has focused on their next big performance improvement target - Images. And rightly so, as images can take up to half a web page's size. Built-in collaboration with the Google Chrome team, the new Image React component is a drop-in replacement for the HTML <img> element. However it does a lot of magic behind the scenes - From automatic lazy loading when the images are near viewport, automatic preloading of critical images, to correct sizing across devices and built-in image optimization in modern image formats like webp for any image source - there is a lot of magic and awesomeness for image handling in version 10.
- Internationalized Routing
The first in series of internationalization and localization features, Next.js 10 has built-in support for automatic internationalization routing detection - users will be automatically redirected to their preferred language, based on their Accept-Language browser header. Next.js 10 also supports the two most popular internationalization routing strategies - subpath routing and domain routing, and allows for integrating with the majority of React internationalization libraries. So if you want your app to be used all over the world, in multiple languages - things just got easier.
- Next.js Commerce
This all-in-one, open-source e-commerce starter kit enables you to create and customize delightful online experiences with high-performance e-commerce sites. It is currently pre-integrated with BigCommerce, but more integrations will be incorporated in the near future.
- Analytics
Next.js Analytics allows continuous tracking of real-world performance metrics, based on actual devices used by your app's users. Google Web Vital Performance Metrics, that track the perceived loading speed, responsiveness, and visual stability of your website, are all tracked and reported from the new Vercel's Analytics console. Thus, using Analytics, you can analyze not only your audience but also the web performance of your web app.
The new Next.js 10 release fills in quite a few gaps over Gatsby, another popular React framework (by introducing the new image optimization features). It also integrates the open-source framework tighter into the proprietary Vercel hosting platform, via Next.js Analytics. All-in-all, the various incremental updates and new features that have been introduced over the years, have led to a very pleasant and delightful development experience. The future for Next.js is indeed very bright.