Creating a PWA with Next.js and next-pwa to improve your websites UX

Turning your website into a PWA, especially if your website doesn't rely on an internet connection at all, can greatly improve it's user experience by allowing them to access your web app anywhere.

Lighthouse PWA optimized check
Author
Isaac Bythewood Isaac Bythewood
June 18, 2022

If you have a particularly large single page web app then a PWA can dramatically increase return conversions by reducing the need to redownload assets on repeat visits and provide a native app like experience on users' devices.

Timelite is currently one of my apps that I needed to make into a PWA, you can check it out at https://timelite.bythewood.me/.

Timelite PWA screenshot

With the creation of Timelite I knew I wanted it to be a PWA since it was a 100% client side web app. I've gone through a couple of Next.js PWA plugin iterations over the years but the easiest by far has been next-pwa. The installation process was done in two steps. First I had to install it with yarn add next-pwa, you can also use npm install next-pwa if you prefer. Then update my next.config.js file with the following:

And I was done! I can now add the Timelite app to my phone's home screen or install it on Chromium based browsers.

Timelite PWA icon

To be fair there is slightly more work you have to put into this installation if you don't already have a manifest.json file. I already had one since Timelite was already a PWA but your manifest goes in the public folder of your Next.js app and it looks something like this:

Now you're truly done! I have a very simple manifest file for Timelite but you may want to add a few more lines and icons such as a maskable icon, which I currently don't have, but it would improve the way the icon looks on some users home screens. For more manifest options and documentation you can check out the next-pwa README.


Related posts

Some posts in similar tags to this one.

Caddy website
Caddy configuration for Django with some sensible defaults
Caddy is a great web server with sensible defaults but there a few things that I need to configure to have perfect synergy with Django.
Isaac Bythewood Isaac Bythewood
June 04, 2022
Django Dockerfile
Running a simple Django website in Docker
Using Docker to run a simple production and development environments with a few extras thrown in. Easily customized to your preferred language or framework.
Isaac Bythewood Isaac Bythewood
May 14, 2022
CodeMirror website
Using CodeMirror to show formatted code in Wagtail
Going through all the steps to use CodeMirror with Wagtail to show formatted code on the frontend of your site.
Isaac Bythewood Isaac Bythewood
June 11, 2022
© 2022 Isaac Bythewood. Some rights reserved.