manifest.json

在 app 目录的根目录中添加或生成符合 Web Manifest 规范的 manifest.(json|webmanifest) 文件，以为浏览器提供有关你的 Web 应用程序的信息。

静态 Manifest 文件

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": "/"
  // ...
}

生成 Manifest 文件

添加一个返回 Manifest 对象的 manifest.js 或 manifest.ts 文件。

提示：manifest.js 是特殊的路由处理器，默认会被缓存，除非它使用动态 API或动态配置选项。

TypeScript

app/manifest.ts

import type { 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',
      },
    ],
  }
}

JavaScript

app/manifest.js

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 对象

manifest 对象包含一个广泛的选项列表，可能会由于新的 Web 标准而更新。有关所有当前选项的信息，如果你使用 TypeScript，请参考代码编辑器中的 MetadataRoute.Manifest 类型，或参阅 MDN 文档。