https://github.com/ragingwind/next-manifest
Next.js plugins for Web Manifest and PWA
https://github.com/ragingwind/next-manifest
Last synced: 9 months ago
JSON representation
Next.js plugins for Web Manifest and PWA
- Host: GitHub
- URL: https://github.com/ragingwind/next-manifest
- Owner: ragingwind
- License: mit
- Created: 2018-03-20T13:32:06.000Z (over 8 years ago)
- Default Branch: master
- Last Pushed: 2020-03-31T05:54:09.000Z (over 6 years ago)
- Last Synced: 2025-04-19T07:56:31.806Z (about 1 year ago)
- Language: JavaScript
- Homepage: https://next-manifest.ragingwind.now.sh/manifest.json
- Size: 56.6 KB
- Stars: 76
- Watchers: 1
- Forks: 13
- Open Issues: 5
-
Metadata Files:
- Readme: readme.md
- License: license
Awesome Lists containing this project
README
# next-manifest
> Next.js plugin for [Web Manifest](https://developer.mozilla.org/en-US/docs/Web/Manifest) and PWA
# Updates
- After 3.x, icon generating is deprecated because of `worker_threads` is not supported on now platform.
# Installation
```sh
npm install --save next-manifest
```
or
```sh
yarn add next-manifest
```
# Usage
```js
// next.config.js
const withManifest = require('next-manifest');
const defaults = {
// next-manifest options
output: './static/', // The folder where the manifest will be generated.
// 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:
```html
```
for your convenience, this plugin supports `Manifest` component. You can place `Manifest` component under `` component in `_document.js` with props.
```js
// pages/_document.js
import Manifest from 'next-manifest/manifest'
```
if you want to update the values in tags, pass the content and href value to the component
```js
// pages/_document.js
import Manifest from 'next-manifest/manifest'
```
See [the example project](https://github.com/ragingwind/next-manifest/blob/master/examples/hello-pwa/pages/_document.js) to understand.
## License
MIT © [Jimmy Moon](https://jimmymoon.dev)