PWA with Next.js (create-next-app) in 2020 ⚡️

Next.js + PWA = ⚡️📱

Let’s convert a create-next-app project into a Progressive Web App (PWA)

1. Setup

Let’s create a boilerplate Next.js project using create-next-app (CNA) by running this command:

npx create-next-app

You can open the project folder in your text editor. All terminal commands after this step is assumed to be executed in the project directory.

2. Install next-pwa

Let’s add the next-pwa package to our project. Run :

npm install next-pwa

Or :

yarn add next-pwa

3. Create next.config.js file

You can create a next.config.js file using this command.

touch next.config.js

Now, we need to edit this file and include all our next-pwa configurations. Here is an example next.config.js that’ll help you get started:

Notice we have added the pwa config inside withPwa . On previous versions of Next, serving the service worker requires a custom server. But since Next 9+, this is not required. It’s much easier now! next-pwa will create the sw.js file and this file will served from the public folder in the production build.

4. Create manifest.json file

You can create a manifest.json file from this online tool. Make sure you generate the icons as well from this tool. We need them.

App Manifest Generator

You will get a .zip download. Unzip. Copy the manifest.json from your download folder to your /public folder.

And copy the contents of /images from the download folder, to the /public folder of your project. You will see an icons folder :