manifest.json

添加或生成与 app 根目录中的 网络清单规范 匹配的 manifest.(json|webmanifest) 文件，为浏览器提供有关 Web 应用的信息。

¥Add or generate a manifest.(json|webmanifest) file that matches the Web Manifest Specification in the root of app directory to provide information about your web application for the browser.

静态清单文件

¥Static Manifest file

{
  "name": "My Next.js Application",
  "short_name": "Next.js App",
  "description": "An application built with Next.js",
  "start_url": "/"
  // ...
}

生成清单文件

¥Generate a Manifest file

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

¥Add a manifest.js or manifest.ts file that returns a Manifest object.

很高兴知道：manifest.js 是特殊的路由处理程序，除非使用 动态函数 或 动态配置 选项，否则默认情况下会缓存。

¥Good to know: manifest.js is special Route Handlers that is cached by default unless it uses a dynamic function or dynamic config option.

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

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

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

¥The manifest object contains an extensive list of options that may be updated due to new web standards. For information on all the current options, refer to the MetadataRoute.Manifest type in your code editor if using TypeScript or see the MDN docs.