コンテンツにスキップ
ファイル命名規則メタデータファイルmanifest.json

manifest.json

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

静的マニフェストファイル

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.jsまたはmanifest.tsファイルを追加します。

ご存知の通り: manifest.jsは特別なルートハンドラーであり、動的APIまたは動的設定オプションを使用しない限り、デフォルトでキャッシュされます。

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

マニフェストオブジェクト

マニフェストオブジェクトには、新しいウェブ標準により更新される可能性のあるオプションの広範なリストが含まれています。現在のすべてのオプションについては、TypeScriptを使用している場合はコードエディターでMetadataRoute.Manifest型を参照するか、MDNのドキュメントを参照してください。