❤
npm
Sign UpSign In

next-manifest

3.0.1 • Public • Published

next-manifest

Next.js plugin for Web Manifest and PWA

Updates

  • After 3.x, icon generating is deprecated because of worker_threads is not supported on now platform.

Installation

npm install --save next-manifest

or

yarn add next-manifest

Usage

// next.config.js
const withManifest = require('next-manifest');
const defaults = {
  // next-manifest options
  outout: './static'/',
  // manifest options
  name: 'PWA',
  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

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

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

Readme

Keywords

Package Sidebar

Install

npm i next-manifest

Repository

github.com/ragingwind/next-manifest

Homepage

github.com/ragingwind/next-manifest#readme

Weekly Downloads

130

Version

3.0.1

License

MIT

Unpacked Size

5.53 kB

Total Files

6

Last publish

Collaborators

  • ragingwind
Try on RunKit
Report malware