next-manifest's Introduction

next-manifest

Next.js plugin for Web Manifest and PWA

Installation

npm install --save next-manifest

yarn add next-manifest

Usage

// next.config.js
const withManifest = require('next-manifest');
const defaults = {
  icons: [
    {
      "src": "/static/icons/icon-192x192.png",
      "sizes": "192x192",
      "type": "image/png"
    },
    {
      "src": "/static/icons/icon-512x512.png",
      "sizes": "512x512",
      "type": "image/png"
    }
  ]
}
module.exports = withManifest({
  manifest: {
    ...defaults
  }
});

manifest.json and icons

After build is over without errors, manifest.json will be created at static/manifest/

Deploying a manifest with more meta for PWA

Web manifest must be declared in your HTML pages using a link tag at the head of your document. Not only manifest link, also both of meta, viewport and theme-color will be needed for your PWA, like below:

<meta name="viewport" content="width=device-width, initial-scale=1" />
<meta name="theme-color" content="#000000" />
<link rel="manifest" href="/static/manifest/manifest.json" />

for your convenience, this plugin supports Manifest component. You can place Manifest component under <Head> component in _document.js with props.

// pages/_document.js
import Manifest from 'next-manifest/manifest'

<Head>
  <Manifest />
</Head>

if you want to update the values in tags, pass the content and href value to the component

// pages/_document.js
import Manifest from 'next-manifest/manifest'

<Head>
  <Manifest
    // path for manifest will be deploying
    href='/static/manifest/manifest.json'
    // color for `theme-color`
    themeColor='#F0F0F0'
    // scale for `viewport` meta tag
    initialScale='1'
  />
</Head>