@thecodinglord
Ezeigbo Emmanuel

How to convert a NextJS 13 app to a Progressive Web App (PWA)

October 3, 2023

Ezeigbo Emmanuel

Ezeigbo Emmanuel

Progressive Web Apps have gained significant traction in recent years due to their ability to combine the best of web and mobile app experiences. They are responsive and available on a variety of devices, and they provide offline access, quick load times, and a smooth user interface. This tutorial teaches how to convert your normal NextJS app to a Progressive Web App.

Typescript

NOTE: We will use the FitnessApp that we created before as a test case.

Installing and Configuring the package

The first thing we need to do is to install the next-pwa package.

terminal

npm install next-pwa

After installing the package, go to next.config.js to configure the package.

next.config.js

/** @type {import('next').NextConfig} */
const withPWA = require('next-pwa')
const nextConfig = {
    ...withPWA({
        dest: 'public',
        register: true,
        skipWaiting: true
    })
}

module.exports = nextConfig

Restart your server for changes to have effect.

Next, go to your root layout and modify the metadata

app/layout.tsx

export const metadata: Metadata = {
  title: 'FitLord',
  description: 'Created by Ezeigbo Emmanuel',
  manifest: '/manifest.json',
  themeColor: '#ffffff'
}

We gave the manifest key a value that has yet to be created ('/manifest.json'), so let's make that.

You can create it yourself, but I prefer using a manifest.json generator, it makes work easier.
Head over to manifest generator to generate a manifest.json file for you.

Blog Post Image

Make sure you resize your image to 512 * 512 pixels, simicart will work out the remaining sizes for you.
Click Generate and a zip folder will be downloaded. Extract the files and add them to your public folder.

Blog Post Image

You will see a file (manifest.webmanifest), rename this file to manifest.json because the manifest has to be in JSON format.

Save all your files and check your browser:

Blog Post Image
Blog Post Image

In conclusion, transforming a Next.js 13 application into a Progressive Web App (PWA) is a forward-looking approach to enhancing user experience and engagement. By following the steps outlined in this guide, developers can harness the power of PWAs to deliver faster load times, offline functionality, and seamless cross-device compatibility. Embracing PWAs not only keeps your web app at the cutting edge of technology but also ensures that it remains accessible and responsive to users in an ever-evolving digital landscape. So, take the plunge and start reaping the benefits of PWA conversion for your Next.js 13 app today.

🚀 If you found value in this blog post and want to see more quality coding content, please consider supporting me with a virtual coffee ☕. Your support helps me keep creating and sharing knowledge with the coding community. It's the small gestures that make a big difference. Thank you!

☕Buy me a coffee

Share post

Read more blogs

Ezeigbo Emmanuel

September 26, 2023

How to create a fitness app with NextJS and Typescript

In today's fast-paced world, staying healthy and fit is a priority for many of us. In this tutorial, we will embark on a journey to develop a cutting-edge fitness application that leverages the power of Next.js and TypeScript.

Read Post

Ezeigbo Emmanuel

August 19, 2023

How to build a blog with NextJs 13, Typescript and Tailwind CSS

Creating a blog in 2023 has never been so easy, sanity.io together with NextJS 13 and typescript does wonders. In this tutorial, I am going to share my knowledge on how I created this blog.

Read Post

Enjoyed this article?

Leave a comment

Comments

Be the first to comment