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
- JavaScript
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',
},
],
}
}
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 ドキュメントを参照してください。