pwa issue in next js

when i get yes to thise question in next js setup ( Would you like to use App Router?)! pwa not installed (dont show install icon) and i see this message when use lighthouse tab ((page has no manifest link url nextjs)). when i said no to abow question, i can install pwa correctly what is a problem?

_document.js file:

import Document, { Html, Head, Main, NextScript } from 'next/document';

class MyDocument extends Document {
  render() {
    return (
      <Html>
        <Head>
          {/* Include your manifest.json file */}
          <link rel="manifest" href="/manifest.webmanifest" />
        </Head>
        <body>
          <Main />
          <NextScript />
        </body>
      </Html>
    );
  }
}

export default MyDocument;

manifest.json

{
    "theme_color": "#f69435",
    "background_color": "#f69435",
    "display": "standalone",
    "scope": "/",
    "start_url": "/",
    "name": "PWA Test ",
    "short_name": "PWA Test ",
    "description": "cool PWA",
    "icons": [
        {
            "src": "/icon-192x192.png",
            "sizes": "192x192",
            "type": "image/png"
        },
        {
            "src": "/icon-256x256.png",
            "sizes": "256x256",
            "type": "image/png"
        },
        {
            "src": "/icon-384x384.png",
            "sizes": "384x384",
            "type": "image/png"
        },
        {
            "src": "/icon-512x512.png",
            "sizes": "512x512",
            "type": "image/png"
        }
    ]
}```

Solution

This is for next js 13

Firstly install next-pwa using npm

npm install next-pwa

Secondly configure your next.config.js file, you can add other options you need

/** @type {import('next').NextConfig} */


const withPWA = require("next-pwa")

const nextConfig={
  ...withPWA({
    dest:'public',
    register:true ,
    skipWaiting:true,
  })
}
 module.exports = nextConfig

Thirdly, make sure all your icons are in the public folder!

Finally In the root of the app folder create a manifest.ts or js file depending on which language your are using.

Inside that file paste the following code

import { MetadataRoute } from "next";

export default function manifest() : MetadataRoute.Manifest{
    return{
       // paste your manifest details here eg
       name:"My first pwa",
       .....
    }
}

And that's it your site should now be able to install

For extra reading visit Next js site on metadata configurations

https://nextjs.org/docs/app/api-reference/file-conventions/metadata/manifest