Next.js 16+ · Directive

manifest

Next.js App Router supports static or generated web app manifests. Put the manifest at the root of app and use either a JSON/webmanifest file or a JS/TS module returning a Manifest object.

How it works

Place a static manifest file or a manifest.ts/manifest.js function at the root of app. Next.js uses it to provide browser-facing web application metadata that follows the Web Manifest Specification.

Syntax

app/manifest.(json|webmanifest)
app/manifest.(js|ts) → Manifest

Returns

A Manifest object from a dynamic manifest module; static files contain the manifest directly.

Key points

A static web manifest can be supplied with either the .json or .webmanifest filename convention.
The manifest contents should follow the Web Manifest Specification rather than an arbitrary application-specific shape.
Put the manifest at the root of the App Router's app directory.
Its role is to expose web-application information that the browser can use.
For generated metadata, use a JavaScript or TypeScript manifest module.
The dynamic module must return a Manifest object.

Common mistakes

The manifest file must be placed at the root of the app directory; nesting it in a route segment is not the documented location.

Example: Dynamic App Router manifest

// app/manifest.ts
import type { MetadataRoute } from 'next'

export default function manifest(): MetadataRoute.Manifest {
  return {
    name: 'My Next.js Application',
    short_name: 'Next.js App',
    description: 'An application built with Next.js',
    start_url: '/',
  }
}

Create this file at the root of the app directory to generate the web app manifest.

When to use it

Static browser metadata

The web app has fixed metadata such as its name, description, and launch URL.

Dynamic manifest generation

Manifest values need to be produced by application code.

Web application identity

The application needs browser-recognized web app information for install-oriented experiences.

Interview questions

QWhich manifest file forms does the App Router support?

Next.js supports static app/manifest.json or app/manifest.webmanifest files, as well as dynamic app/manifest.js or app/manifest.ts files. A dynamic file must return a Manifest object.

Follow-up: How would you choose between the two? Use a static file for fixed metadata and a function when the manifest needs to be generated dynamically.

QWhat is the purpose of an App Router manifest?

The manifest describes the web application for the browser and must match the Web Manifest Specification. Typical fields include the application name, short name, description, and start URL.

Follow-up: What additional manifest data might be needed for installation? Add specification-supported fields such as icons and display settings when the application requires them.

QHow do you create a dynamic manifest?

For a dynamic manifest, export a function from app/manifest.ts or app/manifest.js that returns the manifest object. The returned object contains the web app metadata consumed by the browser.

Follow-up: Where should the function be located? At the root of the app directory, using the documented manifest file convention.

MetadataRoute.Manifest
app/manifest.json
app/manifest.webmanifest
app/manifest.js
app/manifest.ts
Web Manifest Specification

Source: Next.js. Checked 2026-10-15.