https://github.com/filipchalupa/nextjs-webmanifest

Simplify adding webmanifest to your web.
https://github.com/filipchalupa/nextjs-webmanifest

Last synced: about 14 hours ago
JSON representation

Simplify adding webmanifest to your web.

• Host: GitHub
• URL: https://github.com/filipchalupa/nextjs-webmanifest
• Owner: FilipChalupa
• Created: 2023-05-12T09:58:30.000Z (over 1 year ago)
• Default Branch: main
• Last Pushed: 2024-02-19T11:02:53.000Z (9 months ago)
• Last Synced: 2024-11-01T08:39:22.302Z (6 days ago)
• Language: TypeScript
• Homepage: https://www.npmjs.com/package/nextjs-webmanifest
• Size: 1.14 MB
• Stars: 1
• Watchers: 2
• Forks: 0
• Open Issues: 0
• Metadata Files:
  • Readme: README.md

Awesome Lists containing this project

README

        
# Next.js Webmanifest helper [![npm](https://img.shields.io/npm/v/nextjs-webmanifest.svg)](https://www.npmjs.com/package/nextjs-webmanifest) ![npm type definitions](https://img.shields.io/npm/types/nextjs-webmanifest.svg)

Simplify adding webmanifest to your web.

## Installation

```bash

npm install nextjs-webmanifest

```

## Usage

### With `pages` directory

Create `app.webmanifest.js` file inside your Next.js `pages/api` directory and use `createWebmanifestHandler`.

#### `pages/api/app.webmanifest.js`

```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

```js

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

})

```

#### ``

Don't forget to add `` to `` to tell browser where to look for your webmanifest.

```html

```

### With `app` directory

Create `route.js` file inside your Next.js `app/app.webmanifest` directory and use `createWebmanifestGET`.

#### `app/app.webmanifest/route.js`

```js

import { createWebmanifestGET } from 'nextjs-webmanifest'

export const GET = createWebmanifestGET({

	name: 'My Super Trouper App',

	// and more

})

```

`createWebmanifestGET` can accept asynchronous function as well.

#### ``

Don't forget to add `` to `` to tell browser where to look for your webmanifest.

```html

```

or

```js

export const metadata: Metadata = {

	manifest: '/app.webmanifest',

}

```