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…