Skip to content
Next.js plugins for Web Manifest and PWA
Branch: master
Clone or download
Latest commit 713cb7b May 28, 2019
Permalink
Type Name Latest commit message Commit time
Failed to load latest commit information.
examples/hello-pwa v2.0.0 May 27, 2019
.editorconfig init Mar 20, 2018
.gitattributes init Mar 20, 2018
.gitignore init Mar 20, 2018
.npmrc init Mar 20, 2018
.travis.yml Update node version May 27, 2019
index.js Using sync to make a manifest May 27, 2019
license init Mar 20, 2018
manifest.js fix intent Mar 25, 2018
package.json v2.0.0 May 27, 2019
readme.md Update readme.md typo May 27, 2019

readme.md

next-manifest

Next.js plugin for Web Manifest and PWA

Installation

npm install --save next-manifest

or

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>

See the example project to understand.

License

MIT © Jimmy Moon

You can’t perform that action at this time.