manifest.json

app 디렉터리의 루트에 웹 매니페스트 사양 (opens in a new tab)을 따르는 manifest.(json|webmanifest) 파일을 추가하거나 생성하여 브라우저에 웹 애플리케이션에 대한 정보를 제공하십시오.

Static Manifest file

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": "/"
  // ...
}

Generate a Manifest file

Manifest 객체를 반환하는 manifest.js 또는 manifest.ts 파일을 추가하십시오.

알아두면 좋은 점: manifest.js는 특수한 라우트 핸들러로, 동적 함수나 동적 구성 옵션을 사용하지 않는 한 기본적으로 캐시됩니다.

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 Object

매니페스트 객체에는 새 웹 표준으로 인해 업데이트될 수 있는 다양한 옵션이 포함되어 있습니다. 현재 모든 옵션에 대한 정보는 TypeScript (opens in a new tab)를 사용하는 경우 코드 편집기에서 MetadataRoute.Manifest 타입을 참조하거나 MDN (opens in a new tab) 문서를 참조하십시오.

App Icons OpenGraph Image