manifest.json#
- 상위 메뉴: Metadata Files
- 전체 목차: Next.js 학습 문서
학습 목표#
- Web App Manifest를 정적 파일 또는 타입 안전한 함수로 제공한다.
- 파일 위치와 caching 조건을 이해한다.
핵심 개념 및 설명#
app 디렉터리의 루트에 웹 매니페스트 사양과 일치하는 manifest.(json|webmanifest) 파일을 추가하거나 생성하여 브라우저에 웹 애플리케이션에 대한 정보를 제공한다.
<a id="static-manifest-file"></a>
정적 매니페스트 파일#
app/manifest.jsonjson
{
"name": "My Next.js Application",
"short_name": "Next.js App",
"description": "An application built with Next.js",
"start_url": "/"
// ...
}<a id="generate-a-manifest-file"></a>
매니페스트 파일 생성#
`Manifest` 객체를 반환하는 manifest.js 또는 manifest.ts 파일을 추가한다.
알아두면 좋은 점: manifest.js는 요청 시점 API 또는 동적 구성 옵션을 사용하지 않는 한 기본적으로 캐시되는 특수 Route Handler이다.app/manifest.tsts
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.jsjs
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',
},
],
}
}<a id="manifest-object"></a>
매니페스트 객체#
매니페스트 객체에는 새로운 웹 표준으로 인해 업데이트될 수 있는 광범위한 옵션 목록이 포함되어 있다. 현재 모든 옵션에 대한 자세한 내용은 TypeScript를 사용하는 경우 코드 편집기에서 MetadataRoute.Manifest 유형을 참조하거나 MDN 문서를 참조한다.
예제 및 데모 설계#
- Phase 2에서 정적 manifest와 TypeScript 함수 variant를 번갈아 적용해 browser application panel을 확인한다.
연습 문제#
manifest파일의 위치는?
- A.
approot - B. 모든 nested segment
- C.
.next폴더
정답 보기
정답: A. Web App Manifest는 app root에 둔다.
챕터 요약#
- manifest는 웹 앱 정보를 브라우저에 제공한다.
- 정적 JSON/webmanifest 또는 JS/TS 함수로 정의한다.
- TypeScript에서는
MetadataRoute.Manifest를 사용한다. - Request-time API가 없으면 기본적으로 캐시된다.