From 8076382b9b1d76b87d3e48de628077ec33d836eb Mon Sep 17 00:00:00 2001
From: Delba de Oliveira <delbabrown@gmail.com>
Date: Tue, 22 Aug 2023 14:11:10 +0100
Subject: [PATCH] Document manifest metadata file

---
 .../01-metadata/manifest.mdx                  | 173 ++++++++++++++++++
 1 file changed, 173 insertions(+)
 create mode 100644 docs/02-app/02-api-reference/02-file-conventions/01-metadata/manifest.mdx

diff --git a/docs/02-app/02-api-reference/02-file-conventions/01-metadata/manifest.mdx b/docs/02-app/02-api-reference/02-file-conventions/01-metadata/manifest.mdx
new file mode 100644
index 0000000000000..023dcb96549e1
--- /dev/null
+++ b/docs/02-app/02-api-reference/02-file-conventions/01-metadata/manifest.mdx
@@ -0,0 +1,173 @@
+---
+title: manifest.json
+description: API Reference for manifest.json file.
+---
+
+Add or generate a `manifest.(json|webmanifest)` file that matches the [Web Manifest Specification](https://developer.mozilla.org/en-US/docs/Web/Manifest) in the **root** of `app` directory to provide information about your web application for the browser.
+
+## Static Manifest file
+
+```json filename="app/manifest.json | app/manifest.webmanifest"
+{
+  "name": "My Next.js Application",
+  "short_name": "Next.js App",
+  "description": "An application built with Next.js",
+  "start_url": "/"
+  // ...
+}
+```
+
+## Generate a Manifest file
+
+Add a `manifest.js` or `manifest.ts` file that returns a [`Manifest` object](#manifest-object).
+
+```ts filename="app/manifest.ts" switcher
+import { MetadataRoute } from 'next'
+
+export default function manifest(): MetadataRoute.Manifest {
+  return {
+    name: 'Next.js App',
+    short_name: 'Next.js App',
+    description: 'Next.js App',
+    start_url: '/',
+    display: 'standalone',
+    background_color: '#fff',
+    theme_color: '#fff',
+    icons: [
+      {
+        src: '/favicon.ico',
+        sizes: 'any',
+        type: 'image/x-icon',
+      },
+    ],
+  }
+}
+```
+
+```js filename="app/manifest.js" switcher
+export default function manifest() {
+  return {
+    name: 'Next.js App',
+    short_name: 'Next.js App',
+    description: 'Next.js App',
+    start_url: '/',
+    display: 'standalone',
+    background_color: '#fff',
+    theme_color: '#fff',
+    icons: [
+      {
+        src: '/favicon.ico',
+        sizes: 'any',
+        type: 'image/x-icon',
+      },
+    ],
+  }
+}
+```
+
+### Manifest Object
+
+```tsx
+type Manifest = {
+  background_color?: string
+  categories?: string[]
+  description?: string
+  dir?: 'ltr' | 'rtl' | 'auto'
+  display?: 'fullscreen' | 'standalone' | 'minimal-ui' | 'browser'
+  display_override?: (
+    | 'fullscreen'
+    | 'standalone'
+    | 'minimal-ui'
+    | 'browser'
+    | 'window-controls-overlay'
+  )[]
+  file_handlers?: {
+    action: string
+    accept: {
+      [mimeType: string]: string[]
+    }[]
+  }[]
+  icons?: {
+    src: string
+    type?: string
+    sizes?: string
+    purpose?: 'any' | 'maskable' | 'monochrome' | 'badge'
+  }[]
+  id?: string
+  lang?: string
+  launch_handler?: {
+    platform?: 'windows' | 'macos' | 'linux'
+    url?: string
+  }
+  name?: string
+  orientation?:
+    | 'any'
+    | 'natural'
+    | 'landscape'
+    | 'portrait'
+    | 'portrait-primary'
+    | 'portrait-secondary'
+    | 'landscape-primary'
+    | 'landscape-secondary'
+  prefer_related_applications?: boolean
+  protocol_handlers?: {
+    protocol: string
+    url: string
+    title?: string
+  }[]
+  related_applications?: {
+    platform: string
+    url: string
+    id?: string
+  }[]
+  scope?: string
+  screenshots?: {
+    src: string
+    type?: string
+    sizes?: string
+  }[]
+  serviceworker?: {
+    src?: string
+    scope?: string
+    type?: string
+    update_via_cache?: 'import' | 'none' | 'all'
+  }
+  share_target?: {
+    action?: string
+    method?: 'get' | 'post'
+    enctype?:
+      | 'application/x-www-form-urlencoded'
+      | 'multipart/form-data'
+      | 'text/plain'
+    params?: {
+      name: string
+      value: string
+      required?: boolean
+    }[]
+    url?: string
+    title?: string
+    text?: string
+    files?: {
+      accept?: string[]
+      name?: string
+    }[]
+  }
+  short_name?: string
+  shortcuts?: {
+    name: string
+    short_name?: string
+    description?: string
+    url: string
+    icons?: {
+      src: string
+      type?: string
+      sizes?: string
+      purpose?: 'any' | 'maskable' | 'monochrome' | 'badge'
+    }[]
+  }[]
+  start_url?: string
+  theme_color?: string
+}
+```
+
+For more information on individual options, see [MDN](https://developer.mozilla.org/en-US/docs/Web/Manifest).