What is Next.js?

Introduction

Developers usually enjoy working with React-powered JavaScript apps until they realize that there are a couple of minor client-side problems when it comes to rendering every piece of content on the page.

In most cases, the pages simply take a bit longer to load, because the DOM has to generate in the browser, before the content loads, all the JS has to load as well while the wen app also needs to run to determine what should be shown on the page. Even though, this isn't such a huge problem, it might raise a few concerns for some developers.

On the SEO-side of things, search engines are also getting better when it comes to indexing and running JS-apps, and it's a lot more optimal when the site can send them the content instead of letting engines figure it out for themselves.

To overcome these problems, Next.js uses server-side rendering or static site generation (pre-rendering pages at build/compile time).

While this improves SEO a bit, it won't make up for a truly significant advantage.

Next.js features

As already stated before, the framework comes with an array of handy features, and in this section, we'll go over the most notable highlights of the platform.

Server-side rendering

This is a default Next.js feature, which helps to optimize your web app for search engines out of the box.

Thanks to the server-side rendering features, other middleware integrations are also possible, like in the cases of express.js and/or Hapi.js. Also, you can run MySQL or MongoDB databases.

On the other hand, these can be also done with Express API with React.

Since we are on the topic of search engine optimization, it's worth mentioning that the framework comes with a dedicated Head component that allows developers to use and to create dynamic meta tags.

Also, the SSR generates the site on the server every time when a user visits the site. In this case, the user gets the ready HTML template which is can be indexed. While this is a really handy feature, it's most optimal when you can't use SSG. For example, when keeping a high ranking is constantly is a top priority, however, the data on the web app changes frequently.

Generating static websites

Another handy feature, apart from server-side rendering. Developers can simply compile and export the web apps as static HTML websites and deploy them on a hosting page like GitHub, for instance.

Also, when the HTML generates, the I JSON files also generated which are used later for Single Page Applications (SPA), so they don't have to be downloaded subsequently.

On the other hand, not only HTML pages can be generated as static, as Next.js can be run on the server, which can be configured, and subsequently created pages can be created and added to bundles with other pages, as well as making certain pages regenerate (Incremental static regeneration), i.e. to compile help at a certain interval. For example, a page pulls data from a CMS, the developer changes something in the CMS and he or she wants those changes to be displayed on the site, instead of compiling the whole application, they can make only one page compile, i.e. regenerate.

Routers

Another great feature from Next.js. This framework comes with its own routers and no configurations, meaning developers don't need to hassle with any extra work. They just have to create their page in the dedicated Next.js folder and the framework will do the rest of the legwork with the routes being created based on the files and folders.

Lazy loading/Code splitting

This feature helps to deliver a better overall user experience. As you know, sometimes pages take a bit more time to load than usual. The problem with this is that the more time it takes to display the requested information, the greater the chance of the users abandoning the site.

To bypass this problem, Next.js uses lazy loading or code-splitting, by only loading the essential code on your page.

With Next.js, the pages are rendered with just the essential JavaScript and libraries. Instead of generating the entire JS file and the app code, Next.js breaks the app up into several different resources, loading only the JavaScript necessary for that dedicated page.

Next.js realizes this by analyzing imported resources and will also include the specific library in the bundle.

This process ensures that the first page load is as fast as it can be with future page loads sending only the necessary JS to the client.

Lastly, frequently used imports will also be moved into the main JS bundle when used in at least half of the total number of site pages.

Hot code reloading

Next.js will reload the page when it detects changes that are saved to the disk.

Single file components and styled-jsx

When developers are discussing the basic features of Next.js, it's also necessary to mention styled-jsx, a CSS system specially created for the framework, allowing developers to harvest all the benefits of CSS directly in the JS files.

The CSS system boasts a certain set of benefits and one of them is economic CSS generation. Namely, styled-jsc only generates the CSS that's currently being used and automatically removes it when the component isn't being used anymore. This literally means that developers will never have to deal with unnecessary CSS.

Ecosystem compatibility

Next.js is fully compatible with the vast majority of the Node, React, and JS ecosystem.

Prefetching

The “link” component (that links together the pages on an application) supports the so-called “prefetch” prop, that automatically prefetches different resources of the pages in the background, like the missing code due to code splitting.

Dynamic components

Next.js gives you the option of importing React components and JS modules dynamically. This is important if a library tries to access a DOM that does not exist on the server. The Dynamically imported code is not executed on the server, only on the client side.

TypeScript Support

As Next.js is written in TypeScript, it comes with great support.

Installation and the basics

Getting Next.js up-and-running is a fairly straightforward process, given that developers already have NPM and NodeJS running.

To take the simplest route, in the case of simple apps, using the command: npx create-next-app application-name can be used to create an app on the get-go. Or if someone wants a boilerplate, then they will usually visit Next.js on Github and pick the one they need.

Creating custom configurations

While the basic features of Next.js will satisfy most developers, they can always add additional dependencies or different packages for your application.

Next.js gives developers the opportunity to customize the configurations they have thanks to the next-config.js file.

For instance, if they'd like to add Sass support to the application, they can do it by using the next-sass package along with the next-config.js file.

Next.js vs Create React App vs Gatsby

All three are amazing tools and developers can use them to amp up their applications significantly. They all work with React and they come with similar abstract web packs.

The Create React App falls a bit behind with the other two when it comes to features since it won't help much with server-side rendering and anything that's related to SEO or speed.

With that cleared out of the way, there's only Gatsby and Next.js left. Which is a better option?

When comparing them, both will aid in server-side rendering, however, they will help in separate ways.

Gatsby is more of a static site generator without a server. This means that after building the site, developers deploy the end product on a static hosting site.

Next.js, on the other hand, provides a backend for server-side rendering responses and requests allowing developers to build dynamic websites and deploying them on a Node.js-compatible platform. That being said, the framework can also generate a static site too, but that's not its main feature.

Next.js and the future of React

Developers who are up-to-date with the latest trends know that Vue and React are currently the top most popular frameworks on the scene. That being said, experts also know that while React is an good and helpful tool, it has its own limitations when used out of the box. Hence the creation of Next.js, as a great tool to overcome React's shortcomings.

The “problem” with React

The main problem with React that it was never actually designed to be a be-all and end-all framework fulfilling all developer needs. It started its career as a view library. However, it had a big impact on web development becoming immensely popular among experts who started releasing a huge number of useful utilities and middleware to transform React from a View framework into something more robust and complete.

Still, the problem remains: even now, with the huge community support, when a developer wants to start a new React project, the journey will still be a bit tedious since they'll have to think about things like:

• State management (even though not really a problem since the introduction of the Context API with React 16.3)
• Routing solutions (another easily fixable problem even without Next.js)

With the introduction of Next.js, these gaps are a lot easier to fill (at least, most of them) and the entire development process gets a lot quicker.

Enter Next.js

As already stated above, Next.js is basically a React-based framework, making it a framework for a framework as it addresses all the issues that stem from Reacts missing characteristics that would make it a fully-fledged and robust development platform.

The heavy hitters/Framework highlights

When looking at the framework, Next.js is a clear hit among developers mainly because it shortens the time needed to sort out different issues before starting a React-based project. On the other hand, the distinctive features of the framework add not only value to the professional but to the end-user as well.

So, to summarize it, here are the most notable highlights of the platform:

• Easy to use – when you have the required tools installed on your computer, starting a new project with Next.js is a straightforward and fast-paced process.
• Automatic code splitting – we've already mentioned this incredibly great feature that can make or break the success of a website in a world where users won't wait any longer than a few seconds for a page to load. The lightweight bundles the feature uses enables fast loading, a smooth user experience.
• Prefetching – also covered above, the prefetching feature picks off where the code splitting ends as Next.js allows the optimized code bundles to be lazy-loaded in the background providing even smoother user experience.
• Server-side rendering – this too has been mentioned before. SSR allows developers to push the web app to clients with a generated HTML. Thus, it provides users with the initial render of the app's view while it loads the code in the background.
• Error reporting and HMR – Hot-module replacement became a must-have in modern web development, that's a fact. HMR will recreate the altered modules whenever the code is changed instead of reloading the entire app. This also allows Next.js to sport a high-powered development process, coupled with some amazing error messages than can be rendered immediately whenever there's a faulty code at play. No matter how small the error in the code, the framework will pinpoint not only the file but also the line on which it's happening, making troubleshooting and sorting out bugs a breeze.
• Routing – This feature has also been mentioned before, however, it's also worth pointing out that newcomers might find it a bit unusual at first that Next.js relies more on conventions than on configuration. This means that all JS files placed in pages or src/pages will be mapped to a specific URL that users can simply access from the browser.
• Linking – The framework also sports a built-in linking solution that developers can access in the next/link package. This component will help linking pages in a more optimized fashion.
• API support – Developers will notice that Next.js isn't only a front-end framework. By using it. They can also create back-end endpoints with ease. Just like with the routing feature, every file that's in the pages/api directory can be used as endpoints that users can call from the browser.
• Static page generator – As already pointed out, this framework allows for quick static page generation. SSG has no communication with the base when the user visits a page, and the this is the first thing they see which generates much faster.

Possible drawbacks/criticism

The truth is that no framework is perfect. For developers, the framework they will use the most will mainly boil down to personal preference, necessity, or effectiveness. That being said, in time, they will notice that every platform has at least a bit of room for improvement.

Regarding Next.js, some developers have criticized the platform's state management features – or the lack of it. These claims may seem a bit unfounded, especially after the introduction of the Context API. On the other hand, developers can also use Apollo or Redux to bypass these issues.

Others have mentioned that there's no out-of-the-box support for CSS-in-JS tech. While it's true that developers can use both SCSS and CSS right from the start, however, where it comes to the latest styling approaches and models, adding new code is necessary. Even though this isn't such a huge problem, some might find the added legwork a bit bothersome.

One major problem is that when static pages and JSON files are created, the user has to download both (for a particular page they visit, not for the entire app).

Summary

All in all, Next.js is a solid and really helpful framework that completes React, or at least, fills out the gaps, enabling for a faster development process.

For most developers, Next.js will provide a configured and working development environment from the get-go for creating a wide array of different web applications.

The framework is splendid for server-side rendered page projects, statically generated pages, single-page apps, and more. Coupled with the API support, Next.js can also be used to create complete pages using backend logic.

The drawbacks include the challenges one faces with static pages and JSON files, and with modern styling approaches, however, these can also be bypassed with a bit of extra work.