Skip to main content
Andrey.dev

How To PWA your NextJS app like a Pro

Posted on:  at 
How To
NextJSTailwindCSSPWABlog
Picture

My experience working with Nextjs and improving performance of my NextJS app by making it a PWA.

What is a Progressive Web App?

some of you might be wondering what's a PWA? well, google that sh*t what do you think this is? introduction to Computer Science instead here are some of the reasons why you should PWA your website

  • Faster load times
  • Offline support
  • Push notifications
  • Add to home screen
  • Improved performance
  • Better user experience
  • SEO benefits

Steps to Transform Your Next.js App into a PWA

some prerequisites before we start

  1. Next.js app
  2. Node.js installed
  3. npm or yarn installed
  4. next-pwa Installed
  5. Basic knowledge of Service Workers
  6. Basic knowledge of manifest.json

Creating a Next.js App

Now create a Next.js project I believe in you. You can do it.

Install the PWA dependency:

Some libraries simplify the PWA setup process for Next.js. A popular option is next-pwa. You can install it using npm, yarn or whatever you think makes your life easier.

npm install next-pwa

Configuring next-pwa

Create a next.config.js file in the root of your project and add the following code:

const withPWA = require("next-pwa");

module.exports = withPWA({
  pwa: {
    dest: "public",
  },
});

Note strict mode might be optional. After running next build, this will generate two files in your public: workbox-*.js and sw.js, which will automatically be served statically.

Create a manifest file:

The manifest file provides information about your PWA, including its name, icons, and theme colour. You can create a manifest.json file in your project's root directory with details like this:

{
  "name": "My PWA",
  "short_name": "PWA",
  "start_url": "/",
  "display": "standalone",
  "background_color": "#ffffff",
  "theme_color": "#000000",
  "icons": [
    {
      "src": "/icon.png",
      "sizes": "192x192",
      "type": "image/png"
    }
  ]
}

Registering the Service Worker

To register the service worker, you need to add the following code to your _app.js file:

import { useEffect } from "react";

function MyApp({ Component, pageProps }) {
  useEffect(() => {
    if ("serviceWorker" in navigator) {
      window.addEventListener("load", function () {
        navigator.serviceWorker.register("/sw.js").then(
          function (registration) {
            console.log(
              "Service Worker registration successful with scope: ",
              registration.scope
            );
          },
          function (err) {
            console.log("Service Worker registration failed: ", err);
          }
        );
      });
    }
  }, []);

  return <Component {...pageProps} />;
}

export default MyApp;

Conclusion

That's it! You've successfully transformed your Next.js app into a PWA. Now you can enjoy the benefits of a PWA, such as faster load times, offline support, and push notifications. I hope this article was helpful to you. If you have any questions or feedback, feel free to leave a comment below. Happy coding!

Share