What can you learn from NextJS

NextJS is a production-ready framework which is built on top of the React framework. The open-source framework built by the team at Vercel, brings in a lot of benefits for getting a website/webapp up and running.

I am going to talk about some of the inherent decisions that made the project a very functional one.

Strong focus on user / developer experience

Developer Perspective:

As a developer, there are a bunch of things that I need to perform before I actually implement a feature. And if you work as a team, you need to ensure that this extra effount is accounted for.

Some of these things include:

• Project setup (Adding libraries, preprocessors, output bundling)
• Usability improvement tools like linters and formatters
• Code organization
• Package version management
• Performance optimization
• Deployment

These are things you can do, but consumes time and effort.

You’ve got to start with the customer experience and work back toward the technology – not the other way around. － Steve Jobs

NextJS follows exactly this. The framework development made sure to prioritize the things that can slow down a developer and found innovative ways to simplify it.

An example is their upgrade path to Webpack 5. It was released under an experimental flag in their 9.X version and later went on to be the default bundler version in V10. But at the same time, they made sure to add a flag to use webpack 4 as well, since they are aware that not all repositories can be easily migrated.

User Perspective:

Do you wait for websites to load if it takes more than a few seconds? The threshold is too low as the internet speeds increased drastically over the last decade.

This was a core focus for the framework. Optimize the performance by using a hybrid approach to rendering. You can opt to render pages on the server and/or on the client.

Another feature that stands out is the static regeneration. As a user, you will expect to consume the latest information at all times. And in the case of static websites, this is not the case. That’s where static regeneration comes into play. NextJS ensures to regenerate the statis pages in runtime as the information changes (at intervals). Doing so helps ensure that the user is greeted with up-to date information.

Built-in optimizations

When building webapps, performance is least prioritized unless there is a problem faced by users. You end up prioritizing more features instead of improving performance.

NextJS offloads this from the developers to the framework itself. It provides helpers for optimizing the loading of scripts, images and even fonts by default. These optimizations can improve the runtime performance drastically, especially on mobile devices.

By baking such features into the framework, NextJS is essencially setting standards for the entire web ecosystem.

Solve a problem that everyone faces and finds harder to address

Controversial moves

Zero config approach

When everyone was going behind webpack and rollup configurations, and Parcel popularising it later on, NextJS adopted it right from the start and ensured to minimize the effort by the developers.

This reduced the barrier to entry drastically as developers didn’t have to learn about bundlers or AST’s etc. Any new developer with knowledge of basics and React can easilty start usign NextJS and enjoy its benefits.

File based routing

By effectively utilizing the file-based routing approach, NextJS effectively prevents people from needing to configure a routing module. This not only reduces the time to market, but also enforces a standard way of handling routes in your webapp.

And with the introduction of dynamic routes, they covered most of the common usecases for routing in webapps.

API Routes

The introduction of API routes was also due to a behavioral change in users. If you check the RFC for this feature, you can see that the feature came into existence because most of its early users were creating custom server.js file to handle dynamic content.

A classic case of addressing the user’s needs.

Not only did this feature did wonders, it helped in making the serverless functions more mainstream to frontend developers (Netlify functions also played it’s role well in it).

As we look at these instances, it is clear that this meta-framework addressed the point-points of it’s potential users helping them capture a space in the huge webdev landscape.

Notes:

If you are wondering about the inspiration for NextJS, Guillermo’s 7 principles for rich web applications served as a end goal of the project.