Primeros pasos

Vamos a crear un proyecto de Next.js usando create-next-app ejecutando este comando:

npx create-next-app

Instalar el paquete next-pwa

npm install next-pwa

O si usamos yarn :

yarn add next-pwa

Crear el archivo next.config.js

Creamos el archivo e incluimos todas nuestras configuraciones para nuestra PWA. Aquí hay un ejemplo next.config.js que te ayudará a empezar:

const withPWA = require('next-pwa')
module.exports = withPWA({
   pwa: {
    dest: 'public'
   }
})

Fíjate que hemos añadido la configuración PWA dentro de withPWA. En versiones anteriores de Next, usar service worker requiere un servidor personalizado. Pero desde Next 9+, esto no es necesario. ¡Ahora es mucho más fácil! next-pwa creará el archivo sw.js y este archivo será servido desde la carpeta pública en la construcción de producción.

Crear el archivo manifest.json

Puedes crear un archivo manifest.json desde esta herramienta online. Asegúrate de generar los iconos también desde esta herramienta. Los necesitaremos.

Web App Manifest Generator

Tendrás una descarga .zip. Descomprímela. Copia el manifest.json de su carpeta de descargas a tu carpeta /public.Y copia el contenido de /images de la carpeta de descargas, a la carpeta /public de su proyecto.

Crear las meta etiquetas

Necesitamos crear un conjunto de meta etiquetas y añadirlas a nuestras páginas usando el componente importado de next/head. Puedes utilizar este repositorio para las etiquetas meta requeridas:

Awesome Meta Tags & Manifest Properties

Aquí hay un ejemplo de las meta etiquetas requeridas:

<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'/>
<meta name='keywords' content='Keywords'/>
<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="/apple-icon.png" />
<meta name="theme-color" content="#317EFB"/>

También puedes generar los favicons y colocarlos en tu carpeta /public usando esta herramienta online.

¡Prueba tu PWA!

Ahora, tu aplicación está lista para ser una PWA. Sólo tenemos que probarla. Cuando usamos next-pwa los service worker están habilitados sólo en la producción. Por lo tanto, debemos construir nuestra aplicación connpm run build o yarn build.

Y luego iniciar el servidor local de producción con npm run start o yarn start.Ir a http://localhost:3000. Si usas Google Chrome, ejecuta una auditoría usando Lighthouse.