manifest.json
브라우저에 웹 애플리케이션에 대한 정보를 제공하기 위해 웹 매니페스트 사양과 일치하는 manifest.(json|webmanifest) 파일을 app 디렉토리의 루트에 추가하거나 생성합니다.
정적 매니페스트 파일
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는 동적 함수나 동적 config 옵션을 사용하지 않는 한 기본적으로 캐시되는 특별한 Route Handler입니다.
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 객체
매니페스트 객체는 새로운 웹 표준으로 인해 업데이트될 수 있는 광범위한 옵션 목록을 포함합니다. 현재 사용 가능한 모든 옵션에 대한 정보는 TypeScript를 사용하는 경우 코드 편집기에서 MetadataRoute.Manifest 타입을 참조하거나 MDN 문서를 참고하세요.