Next.js

Introduction

Next.js is one of many popular open-source web application framework build on top of the Node.js that takes care of the server-side rendering and routing. Its also a framework that expands the react framework so you could call it a react framework with a lot of extra features. It provides a set of powerful features such as automatic code splitting, static site generation (SSG), and serverless functions that would help the developers to create a high performance seo friendly web application. It also has built-in support for TypeScript, Sass, and LESS.

Next.js is popular due to it flexibility and simplicity/ease of use, making it a popular framework to chose from when building a web application with react. It is also popular due to its scalability, good performance and speed.

Brief History

Next.js was first introduced in 2016 by Guillermo Rauch, a software engineer at Vercel/Zeit. The initial release of Next.js was intended to simplify the process of creating a React application with server-side rendering.
In 2018, Vercel introduced Next.js 7, which added new support for static site generation (SSG) and serverless functions.
In 2019, Next.js 8 was released, which added support for automatic code splitting and dynamic imports.
In 2020, Next.js 9 was released, which added support for built-in TypeScript and automatic static optimization. It also improved the support for dynamic imports.
Next.js has gained its popularity among developers due to its simplicity and ease of use. Its also very popular because it can handle big and complex web applications.
Today a lot of companies are using Next.js to build their web applications such as Netflix, Uber, TikTok, Twitch and many more.
With next.js 13 (beta) being released they added a new way to handle routing, which is called the file system based routing. This new way of handling routing is a lot more flexible and easier to use than the previous way of handling routing. (This is quite new)

Features

The framework has a lot of features that make it a popular framework to chose from when building a web application with react. Some of the features include:

Server-side Rendering
Static-side Generation
Client-side Routing
Automatic Code Splitting
Built-in Support
API Routes
Lots of plugins

I will be going through each of these features in more detail in the next section of strengths as these are some of the features that make next so good to chose when working with react.

How it works

Next.js is a framework that is built on top of react, which means that it uses react to build the web application. It also uses react-dom to render the react components on the client side, react-dom/server to render the react components on the server side and uses webpack to bundle the code and babel to transpile the code.

Next.js also uses a lot of other libraries and packages to provide a lot of the features that it provides. Some of the libraries and packages include:

Express - Used to create the server.
React - Used to build the web application.
React-dom - Used to render the react components on the client side.
React-dom/server - Used to render the react components on the server side.
Webpack - Used to bundle the code.
Babel - Used to transpile the code.
Next-routes - Used to create the routes.
Next-images - Used to optimize the images.
Next-seo - Used to optimize the SEO.
Next-translate - Used to translate the website.
Next-auth - Used to handle authentication and authorization.

Strengths

Server-side Rendering - Next.js provides built-in server-side rendering, which let the developers render react components on the server before even sending them to the client. This provides a better pages performance and speed.
Static-side Generation - Allows the developer to generate static HTMl files for each page of the website at the build time, which means it helps a lot in improving the websites speed and performance. This is often used for blogs, e-commerce and news websites.
Client-side Routing - Provides a client side routing, which does mean that users can navigate between pages without having to refresh the page. This provides a better user experience and help in load time.
Automatic Code Splitting - Automatically splits the code into a smaller chunk of code based on the pages and routes, which reduces the code needed to be loaded. This helps in improving the performance and speed of the web application. This is also known as dynamic imports.
Built-in Support - Provides built-in support for TypeScript, Sass, and LESS. This allows the developer to use these features without the need for external libraries.
API Routes - Provides a built-in support for creating serverless API routes. This lets the developer to build backend functions without worrying about server configuration and maintenance.
Lots of plugins - Next.js provides a lot of plugins that can be used to extend the functionality of the framework. Some of the plugins include:
- Next-Auth - Provides a built-in support for authentication and authorization.
- Next-Image - Provides a built-in support for image optimization.
- Next-SEO - Provides a built-in support for SEO.
- Next-Translate - Provides a built-in support for internationalization.

Weaknesses

Next.js is not perfect and does have some weaknesses and some of these could be…

Limited flexibility - Next mainly focuses on server-side rendering and static site generation, which means that it does not provide a lot of flexibility when it comes to building a web application. This could be a problem for developers who want to build a web application that does not require server-side rendering or static site generation. For example the site require a lot of client-side rendering.
Hard to learn - Next.js is a framework that is built on top of react, which means that if your completely new to both, it does require you to kinda learn 2 new frameworks at the same time. This could be a problem for developers who are new to both react and server-side rendering.
Cant control routing - While next.js support built-in routing and navigation, it doesn’t provide much customization when it comes to routing. This could be a problem for developers who want to have more control over the routing.
Limited plugins/compatibility - Next.js does provide a lot of plugins, but it does not provide a lot of plugins that are needed for building a web application. For example, it does not provide a plugin for database management. Its also not compatible with some of the other libraries and packages, which means you might have to use a different library to achieve the same result, or you might have to change the code/plugins to get the solution you want. This adds a lot of difficulty.

Comparison

Next.js is comparable to other frameworks such as Gatsby, Nuxt.js and SvelteKit. Nuxt.js is basically next.js but for Vue.js instead of react. Gatsby is another static site generator with server-side rendering for react. I will be comparing next.js with SvelteKit because they are different from each other while having great similarities.

Similarities

Both of the frameworks are designed to build fast, good performing web applications, which is including both server-rendered and single-page applications. They also both good performing code splitting, and bundles together the best parts of the React and Svelte ecosystems.

They both provide support for build-in support for handling databases and API, and offers a lot of different extensions/plugins to better the use of the framework. and they also both support modern technologies such as Sass, Typescript and GraphQL.

Differences

One of the biggest key difference is that while next.js is built on react, Sveltekit is built on top of svelte. React has also been around for longer, so its a lot more popular for the time being. Which means that there is a lot more documentation and tutorials for react than there is for svelte. Svelte is also a lot more lightweight than react, which means that it does not require a lot of resources to run.

SvelteKit is more opinionated than next.js, with a focus at creating highly optimized web applications. Next.js is more flexible and can be used at a wider range of projects than what sveltekit can be used for.

Summary

Next.js is a well written framework that is built on top of react. It provides a lot of features out of the box that react doesn’t, which makes it a popular framework to chose from when building a web application with react. It also provides a lot of plugins that can be used to extend the functionality of the framework. While you could get server-side rendering and other stuff with react, it does require a bit more work to get it to work, which is why next.js is a lot more popular.

You could also use different frameworks like the others we discussed to get many of the same features, but next.js comes with a lot more tutorials and documentation, which makes it a lot easier to get started with, compared to something like SvelteKit which is fairly new. But that being said, if you know svelte from before, it might be a lot easier to get started with SvelteKit.

If you like react and its eco system, and you want to build a web application that requires server-side rendering, then next.js is a great framework to chose from. But if you want to build a web application that does not require server-side rendering, then you might want to chose a different framework.

Credits

Adrian Fredriksen (AdrianFred)