manifest.json
app
ディレクトリのrootに、Web Manifest Specificationに一致する manifest.(json|webmanifest)
ファイルを追加または生成し、ブラウザにおけるWebアプリケーションに関する情報を提供します。
静的マニフェストファイル
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
は特別な 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',
},
],
}
}
マニフェストオブジェクト
マニフェストオブジェクトには、新しいWeb標準により更新される可能性のある多数のオプションが含まれています。現在のすべてのオプションについては、TypeScriptを使用している場合、コードエディタ内の MetadataRoute.Manifest
タイプを参照するか、MDN ドキュメントをご覧ください。