From React to Next.js

React

React is one of the top libraries (although loosely called a framework) used in modern front-end development, it is advantaged by a large developer community support as it has been around for quite a while. React was launched in 2013 by Facebook as a solution to building single-page applications (SPA). Since the launch of React, the React team has been doing an awesome job in maintaining, updating, and introducing new and interesting features leading to its sustenance, wide acceptance, and adoption through the years, which results in a lot of jobs openings for React developers.

Despite its advantages, React still has its shortfalls. In a bid to minimize complexity, React made tedious the decision-making process of developers as it adopted the declarative approach of building SPAs. In React you have to decide everything as a developer, from the choice of state management, routing, class component, or functional component down to the choice of when to break down components and other degrees of decision making. There is no one way of doing things in React, at best you can only see an optimal pattern of coding a react application. React also is all javascript rendered on the client's browser, and would not be available to users without javascript-enabled browsers. These and some other issues are what Nextjs was created to tackle.

Next.js

Next.js was launched in 2016, as an open-source react framework that extends the regular react functionality while allowing for server-side rendering, static site generation, filesystem routing, and other awesome features all out of the box with little or no configuration needed to use these features in a Nextjs application. Next.js also has out-of-the-box typescript support, and built-in CSS and SASS support. The React team reduced the stress of setting up a React application by introducing the create-react-app tool, which bootstraps a React application leaving developers to focus on code and not build tools. Just like create-react-app Nextjs is bootstrapped by running the following code on the terminal of your project folder;

npx create-next-app

This will install all the required packages and their dependencies. To manually set up your Nextjs application, install react, react-dom, and next in your project;

npm install react react-dom next

Go to the package.json file and add the following;

"scripts": {
    "dev": "next dev",
    "build": "next build",
    "start": "next start"
}

After that, create a pages directory in your project, inside the pages directory add the Index.js file, then inside the file write the following code;

function App() {
  return <h1>My Nextjs App</h1>
}
export default App;

To view what you currently have, go to the terminal and run the following code;

npm run dev

This would spin up a development server and then you can now go to your browser tab and enter;

http://localhost:3000

This is how easy it is to set up your Nextjs application and start building on it.

Next.js version 10

Next.js version 10 was released, and it is packed with super awesome new features and updates that would make the developer's experience quite easy. Some of the new features include a built-in image component and automatic image optimization, Importing CSS from third-party react components, internationalized routing, Next.js analytics, a clone-and-deploy Next.js e-commerce web app amongst others. These new features are game changers especially on the debate of whether React is a library or a framework based on its declarative approach of building SPAs. With Next.js, React can more accurately be called a framework than just a library. The new features are quite extensive and would require individual articles to fully cover their functionality, but for the scope of this article, I will only discuss a little about two of the features that I really find super awesome.

Nextjs Built-in Image Component

One feature that really catches the eye is the new Image component in version 10 which extends the HTML <img /> tag. This component optimizes the images by automatically serving them in modern formats like WebP if the browser supports it. WebP is a new image format developed by Google that employs lossy and lossless compression and it is said to be smaller than jpegs by 30%. It also generates small sizes for images on a smaller viewport and does this optimization on demand and not at build time thereby, not increasing build time no matter the number of images on your page or site. It also lazy-loads images automatically, which means page load speed would not be increased by images that are not within the viewport. To use the next image component, you have to open the file where you want it and simply import and use it as shown below;

import Image from "next/image";

<Image src="/imageurl.png" alt="image" width="400" height="400" />

It is super awesome that as simple as implementing this component is, you get out of the box incredible performance and functionality. The component is also automatically made responsive based on the aspect ratio from the values you specify for the width and height props. Developers can actually preload images, especially if the image is within the viewport before. This is done by adding a priority prop to the Image component.

Internationalized Routing (i18n)

Is your product solving a problem that cuts across different countries? Do you want to reach users in different countries with different languages? Then you have got to consider using Next.js to build your product. Version 10 of Next.js has built-in support for the internationalization of your project. This also supports next.js hybrids; Static Generation or Server-Side Rendering on a per-page basis, which implies that you can internationalize your project pages whether they are statically generated or server-rendered pages. Internationalization is given the alias i18n which is interpreted as the word internationalization with the letter "I" and "o" having 18 letters between them. Only a little configuration is required in the next.config.js as a start to internationalizing your project.

To configure your project for i18n you would have to include it in your next.config.js file as follows:

 module.exports = {
    i18n: {
       locales: ["en-US", "fr", "es-ES", "nl-NL"],
       defaultLocale: en-US
    }
 }

the above configuration uses the sub-path method by putting the locales in the URL path. As a result, if you have a blog.js page in your application the following routes will be available for the different locales:

• /blog
• /fr/blog
• /es-ES/blog
• /nl-NL/blog

The default locale en-US will not have the prefix path. Another way to achieve i18n is to use domain routing and that is by setting it up in the next.config.js file.

 module.exports = {
    i18n: {
       locales: ["en-US", "fr", "es-ES", "nl-NL"],
       defaultLocale: en-US,
       domains: [
          {
            domain: 'example.com',
            defaultLocale: 'en-US'
          },
          {
            domain: 'example.fr',
            defaultLocale: 'fr'
          },
          {
            domain: 'example.es',
            defaultLocale: 'es-ES'
          },
          {
            domain: 'example.nl',
            defaultLocale: 'nl-NL'
          }
       ]
    }
 }

So when you have a blog.js page the following URLs will be available:

• example.com/blog
• example.fr/blog
• example.es/blog
• example.nl/blog

Unless you specify otherwise Nextjs will automatically detect and redirect users to a different domain or subpath other than the default locale based on the Accept-Language header. This means that when a user Accept-Language header is fr; q=0.9, then they will be redirected to example.fr for domain routing and example/fr/blog for the subpath routing.

These and a lot more are what Nextjs offers you for little or no configuration. More recently Nextjs 11 was announced with more performance optimizations that will enhance the developer's experience thereby improving productivity. The team at Vercel is really working hard on releasing cool features in Nextjs which is why, if you are a React developer you need to hop on the Nextjs train.