manifest.json

app ディレクトリの root に Web Manifest Specification に従った manifest.(json|webmanifest) ファイルを追加または生成して、ブラウザに Web アプリケーションに関する情報を提供します。

Static 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 は特別な Route Handlers であり、Dynamic API または dynamic config オプションを使用しない限り、デフォルトでキャッシュされます。

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 オブジェクトには、新しいウェブ規格により更新される可能性のある豊富なオプションが含まれています。すべての現在のオプションについては、TypeScript を使用している場合、コードエディタ内の MetadataRoute.Manifest 型を参照するか、MDN ドキュメントを参照してください。