nextjs-webmanifest
v1.1.5
Published
Simplify adding webmanifest to your web.
Downloads
657
Maintainers
onsetReadme
Next.js Webmanifest helper 
Simplify adding webmanifest to your web.
Installation
npm install nextjs-webmanifestUsage
With pages directory
Create app.webmanifest.js file inside your Next.js pages/api directory and use createWebmanifestHandler.
pages/api/app.webmanifest.js
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
})Asynchronous
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
})<head>
Don't forget to add <link> to <head> to tell browser where to look for your webmanifest.
<link rel="manifest" href="/api/app.webmanifest" />With app directory
Create route.js file inside your Next.js app/app.webmanifest directory and use createWebmanifestGET.
app/app.webmanifest/route.js
import { createWebmanifestGET } from 'nextjs-webmanifest'
export const GET = createWebmanifestGET({
name: 'My Super Trouper App',
// and more
})createWebmanifestGET can accept asynchronous function as well.
<head>
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',
}