How to Implement PWA ( Progressive Web App) in Next.js App router 2026

In this post we will implement the PWA in our Next.js App without using any 3rd party packages.

Lets get straight to the point

1.Create Your Next.js App

npx create-next-app@latest my-app --yes

• --yes skips prompts using saved preferences or defaults. The default setup enables TypeScript, Tailwind, ESLint, App Router, and Turbopack, with import alias @/*.

2.Create Manifest File

Next.js provides built-in support for creating a web app manifest using the App Router. You can create either a static or dynamic manifest file

For example, create a app/manifest.ts or app/manifest.json file

import type { MetadataRoute } from 'next'

export default function manifest(): MetadataRoute.Manifest {
  return {
    name: 'Next.js PWA',
    short_name: 'NextPWA',
    description: 'A Progressive Web App built with Next.js',
    start_url: '/',
    display: 'standalone',
    background_color: '#ffffff',
    theme_color: '#000000',
    icons: [
      {
        src: '/icon-192x192.png',
        sizes: '192x192',
        type: 'image/png',
      },
      {
        src: '/icon-512x512.png',
        sizes: '512x512',
        type: 'image/png',
      },
    ],
  }
}

This file should contain information about the name, icons, and how it should be displayed as an icon on the user’s device. This will allow users to install your PWA on their home screen, providing a native app-like experience.

NOTE : To ensure your application can be installed to a mobile home screen, you must have:

1. A valid web app manifest
2. The website served over HTTPS

Modern browsers will automatically show an installation prompt to users when these criteria are met. You can provide a custom installation button with [beforeinstallprompt](https://developer.mozilla.org/en-US/docs/Web/API/Window/beforeinstallprompt_event), however, we do not recommend this as it is not cross browser and platform (does not work on Safari iOS).

For Testing Locally + HTTPS use this command next dev --experimental-https

Thats it.