Next.jsでmanifest.jsonを作る方法

manifest.jsonとは？

ソフトウェアの情報(メタデータ)を書くファイル。
Next.jsでは、PWAアプリとしてページを動作させたいときに使う。

書き方

JSONを普通に書いて配置する

app/manifest.json

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

(Java|Type)scriptで生成する

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

詳細な記法は、MDN Web Docsをご覧ください。

参考文献