Building Progressive Web Apps with NEXT.js

Digital screens today come in a variety of sizes and shapes. Due to the need to showcase their products to the largest audience in the shortest time, there is now a demand for platform-independent and responsive engineering practices for web and mobile. Next.js provides the solution to mobile and web app developers to ensure that an app or website provides a flawless and consistent user experience, thus making it the constant technology of choice for engineers and market leaders.

In this article, we will learn about the Next.js framework's fundamental components and key features, and how to create progressive web applications using it.

What is Next.js?

Next.js is a server-rendered React framework that provides building blocks for developing fast web applications. It handles React's tooling and configuration, as well as additional structure, features, and optimizations for your application. In addition, next.js features address common application needs like routing, data fetching, and integrations while improving the developer and end-user experience. All in all, it helps to build fully interactive, highly dynamic, and performant web applications.

Why does Next.js Use Server Rendering?

Single-page applications (SPAs) that are client-side-only can be rendered on the server using the common technique known as server-side rendering (SSR) before being sent to the client fully rendered. Since the web applications are rendered on the client side, the reloading time was less for the web pages because of the SPAs. As a result, user experience (UX) was improved, but it was difficult for the web crawlers of search engines like Google to find the content of these applications as the crawler comes to a halt on the first page because it cannot find any hyperlinks to follow. Therefore, Next.js provides a React server-side component rendering (SSR) solution. Developers can use the server to render JavaScript code, allowing them to send simple indexable HTML to the user with the help of Next.js. In addition, it handles issues such as caching, server load, on-demand content, and application architecture.

Why Use Next.js to Build Web Applications?

• Excellent response time in terms of loading
• Automatic code splitting and load times helped with "lazy loading."
• Engaging user-experience
• Faster time to market because of great SEO
• Improved performance
• Offers scalability
• Allows CSS support for developers to import files from a JavaScript library, making it easier for them to work
• Allows fast live editing experience
• Built-in new next/image component, which helps in optimizing images

Getting Started with Next.js

To get started, you would need to have the node.js version of 10.13 or later installed and then run the following commands in the terminal:

npx create-next-app@latest nextjs-blog --use-npm --example
"https://github.com/vercel/next-learn/tree/master/basics/learn-starter"

The above command uses the create-next-app tool, which bootstraps a Next.js app for you and employs this template via the --example flag. Following that, we must navigate to the "nodejs-blog" directory and then launch the development server on port 3000 using the following commands:

cd nodejs-blognpm run dev 

Now to turn our Next.js app into a progressive web app, we need to follow the steps below:

• Install the Progressive Web App dependency
• Create or generate a manifest file
• Create a document.js file
• Configure the next.config.js file

Installing Web App Dependency

Install the Web App dependency using npm or any other version manager like yarn, or any other version manager installed on your pc:

//Using npmnpm i next-pwa

Generating manifest.json File

After the Progressive Web App has been downloaded and installed on the user's computer or mobile device, the next step is to create a manifest.json file with the help of the PWA manifest generator. You can add the downloaded manifest file's contents to your app's public folder by clicking the generate manifest button. The downloaded manifest.webmanifest file then needs to be renamed to manifest.json, which will look like as follows:

{
    “theme_color”: “#1fd4c0”,
    “background_color”: “#259409”,
    “display”: “standalone”,
    “scope”: “/”,
    “start_url”: “/”,
    “name”: “Advice app”,
    “short_name”: “Advice App”,
    “description”: “A random advice generator”,
    “icons”: [
        {
            “src”: “/icon-192×192.png”,
            “sizes”: “192×192”,
            “type”: “image/png”
        },
        {
            “src”: “/icon-256×256.png”,
            “sizes”: “256×256”,
            “type”: “image/png”
        },
        {
            “src”: “/icon-384×384.png”,
            “sizes”: “384×384”,
            “type”: “image/png”
        },
        {
            “src”: “/icon-512×512.png”,
            “sizes”: “512×512”,
            “type”: “image/png”
        }
    ]
}

Creating a _document.js File

In order to prevent Next.js pages from skipping over the definition of the surrounding document's markup, the default document in Next.js should be changed to a _document.js file. The HTML is generally organised by _document.js, where you must make any html or body tag modifications. The file_document.js should look as follows:

import { Html, Head, Main, NextScript } from “next/document”;
export default function Document() {
  return (
    <Html>
      <Head>
        <link rel=“manifest” href=“/manifest.json” />
        <link rel=“apple-touch-icon” href=“/icon.png”></link>
        <meta name=“theme-color” content=“#fff” />
      </Head>
      <body>
        <Main />
        <NextScript />
      </body>
    </Html>
  );
}

To look at the page, check that the development server is up and running and visit http://localhost:3000/posts/page_name.

Configuring the next.config.js File

Last but not least, we must configure the PWA dependency by adding the following code in our next.config.js file.

module.exports = {
reactStrictMode: true,
};
const withPWA = require(“next-pwa”);
module.exports = withPWA({
pwa: {
dest: “public”,
register: true,
        disable: process.env.NODE_ENV === ‘development’,
skipWaiting: true,
},
});

After setting up the next.config.js file, we must execute the following command in the terminal. The application is created using this command for use in production.

npm run build

Lastly, we can launch our Next.js app on the production server using npm run start, and we are done.

Wrapping Up

To conclude, you can significantly increase your search engine visibility by choosing SSR over client-rendered JavaScript. In addition, as discussed above, Next.js automatically splits code, so each page only loads what is required for that page. The code for other pages is not initially served when the homepage is rendered. Even if your homepage contains hundreds of pages, it ensures that it loads quickly. Furthermore, Next.js prefetches the code for the linked page whenever a Link component shows up in the browser's viewport. When you click the link and want to go to another page, the destination page's code will already be loaded in the background.  On the other hand, if a particular page doesn't work, the rest of the application will still work.

You will be free to design an interactive application that meets all your requirements and has all the desired functionalities while providing all of the SEO advantages of a static text-based website. As a result, you will have a slight edge to compete in the market if, for example, you are building an e-commerce web application. From developers to marketers, businesses, corporations, and retailers, NextJS has something for everyone and for this reason our team has chosen it for some of our web applications.