Simplify adding webmanifest to your web.
npm install nextjs-webmanifestCreate app.webmanifest.js file inside your Next.js pages/api directory and use createWebmanifestHandler.
import { createWebmanifestHandler } from 'nextjs-webmanifest'
export default createWebmanifestHandler({
name: 'My Super Trouper App',
short_name: 'App',
start_url: '/',
display: 'standalone',
theme_color: '#04a600',
background_color: '#000000',
// You can add more: https://developer.mozilla.org/en-US/docs/Web/Manifest
})export default createWebmanifestHandler(async (request) => {
const locale = request.url.substring(1, 3)
const response = await fetch(`https://example.com/${locale}/manifest.json`)
const manifest = await response.json()
return manifest
})Don't forget to add <link> to <head> to tell browser where to look for your webmanifest.
<link rel="manifest" href="/api/app.webmanifest" />Create route.js file inside your Next.js app/app.webmanifest directory and use createWebmanifestGET.
import { createWebmanifestGET } from 'nextjs-webmanifest'
export const GET = createWebmanifestGET({
name: 'My Super Trouper App',
// and more
})createWebmanifestGET can accept asynchronous function as well.
Don't forget to add <link> to <head> to tell browser where to look for your webmanifest.
<link rel="manifest" href="/app.webmanifest" />or
export const metadata: Metadata = {
manifest: '/app.webmanifest',
}