Introduction to Next.js

Web development has changed a lot over the last few years. Before the advent of modern JavaScript frameworks, creating dynamic web applications was complex, requiring many different libraries and configurations to make them work as expected.

Angular, React, Vue, and all the other frameworks have enabled the web to evolve very quickly and brought with them some very innovative ideas to front-end web development.

Background

React, in particular, was created by Jordan Walke at Facebook and was heavily influenced by the XHP Hack Library. XHP allowed Facebook’s PHP and Hack developers to create reusable components for the frontend of their applications.

The JavaScript library became open source in 2013 and forever changed how we build websites, web apps, native apps (with React Native later on), and even VR experiences (with React VR). As a result, React has quickly become one of the most loved and popular JavaScript libraries, with millions of websites using it in production for many different purposes.

Challenge with React

There was just one problem: by default, React runs on the client side (meaning that it runs on the web browser), so a web application written entirely with that library could negatively affect search engine optimization (SEO) and initial load performance because it takes some time to be correctly rendered on screen. In fact, to display the complete web app, the browser had to download the entire application bundle, parse its content, then execute it and render the result in the browser, which could take up to a few seconds (with very large applications).

The rise of Next.js

Many companies and developers started investigating how to pre-render the application on the server, letting the browser display the rendered React app as plain HTML, making it interactive as soon as the JavaScript bundle has been transferred to the client.

Then, Vercel came up with Next.js, which turned out to be a game changer.

Since its first release, the framework has provided many innovative features out of the box, such as automatic code splitting, server-side rendering, file-based routing systems, route prefetching, and so on. Next.js showed how easy it should be to write universal web applications by allowing developers to write reusable code for both client and server sides and making very complex tasks (such as code splitting and server-side rendering) effortless to implement.

Today, Next.js provides tons of new features out of the box, such as the following:

• Static site generation

• Incremental static generation

• Native TypeScript support

• Automatic polyfills

• Image optimization

• Support for internationalization

• Performance analytics

We get all this, along with many other great features that we’ll look at in depth later on in this course. Today, Next.js is used in production by top-level companies, such as Netflix, Twitch, TikTok, Hulu, Nike, Uber, Elastic, and many others. If you’re interested, you can read the complete list.

Versatility of Next.js

Next.js showed how versatile React could be for building many different applications at any scale, and it’s not surprising to see it in use by both big companies and small start-ups. By the way, it’s not the only framework that lets you render JavaScript on the server side.