PWA with Next.js App Router

Instructions

This skill covers everything needed to turn a Next.js App Router project into a fully-featured PWA with offline support (via Serwist), push notifications (via VAPID/web-push), and home screen installation.

IMPORTANT: Next.js 16 uses Turbopack by default. You need to install @serwist/turbopack and serwist to use Serwist: https://serwist.pages.dev/docs/next/turbo

1. Web App Manifest

Create app/manifest.ts (Next.js handles routing automatically):

// app/manifest.ts
import type { MetadataRoute } from 'next'