Making a PWA app with Next.js

What is a PWA?

In simple words, a PWA (Progressive Web App) is a website with all the benefits of an app. You can install a PWA app on your phone or download it from your web browser on your laptop. It is fast and lightweight.

In this article, we are going to see how you can make your Next.js app a PWA.

In our Next.js app, firstly we are going to install the package next-pwa.

npm i next-pwa

Setup PWA

Now, we have to edit our config file. The configuration that we will add will make our application create the required service worker files during the compilation.

Open next.config.js file and add the below code to it.

const withPWA = require('next-pwa')

module.exports = withPWA({
    pwa: {
        dest: 'public'
    }
})

inside next.config.js

With this, the required service worker files will be generated in the public folder.

Creating the manifest file

To specify the PWA app's properties, we have to define the properties in a manifest.json file. Create a manifest.json file and paste the below content into it.

{
    "short_name": "Next App",
    "name": "Next App",
    "icons": [
      {
        "src": "favicon.ico",
        "sizes": "64x64 32x32 24x24 16x16",
        "type": "image/x-icon"
      },
      {
        "src": "logo1.png",
        "type": "image/png",
        "sizes": "192x192"
      },
      {
        "src": "logo2.png",
        "type": "image/png",
        "sizes": "512x512"
      }
    ],
    "start_url": ".",
    "display": "standalone",
    "theme_color": "#21125e",
    "background_color": "#ffffff"
  }

Feel free to edit your own app name, logos and colours to it. You can also search for a manifest generator online and use that to create your json.

Adding meta tags

Our application must have some meta tags to give information about our app. To specify meta tags , in your _app.js file, specify a <Head> element, which is imported from "next/head".

import Head from "next/head";

Now insert the following content in it.

 <Head>
      <meta charset='utf-8' />
      <meta http-equiv='X-UA-Compatible' content='IE=edge' />
      <meta name='viewport' content='width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no' />
      <meta name='description' content='Description' />
      <title>Next.js PWA</title>
      <link rel='manifest' href='/manifest.json' />
      <link href='/favicon-16x16.png' rel='icon' type='image/png' sizes='16x16' />
      <link href='/favicon-32x32.png' rel='icon' type='image/png'    sizes='32x32' />
      <link rel='apple-touch-icon' href='/logo1.png'></link>
      <meta name='theme-color' content='#21125e' />
 </Head>