manifest.json in Next.js — Defining App Metadata for Browsers

1. What Is a Manifest?

The manifest.json or manifest.webmanifest file provides metadata about your app to browsers — including its name, icons, colors, and how it should behave when launched as a standalone app. It’s essential for enabling Progressive Web App (PWA) features.

2. Ways to Define a Manifest

You can define the manifest in two ways:

1. Static file: placed at app/manifest.json or app/manifest.webmanifest
2. Generated via code: using app/manifest.ts or app/manifest.js

3. Example Static Manifest

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

4. Generating a Manifest with Code

Use the MetadataRoute.Manifest type to return a manifest object:

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

5. Supported Manifest Options

The manifest object can include:

• name: Full app name
• short_name: Short name for icon display
• description: App description
• start_url: Launch path
• display: Display mode (e.g. standalone)
• background_color: Background color
• theme_color: Theme color
• icons: List of icons with src, size, and type

6. Good to Know

• The manifest file must be placed in the root of the app directory
• Code-based manifests are cached by default unless they use dynamic APIs
• To explore all available options, use TypeScript with MetadataRoute.Manifest or refer to the MDN docs

Conclusion

The manifest.json file in Next.js plays a key role in defining how your app appears and behaves in browsers. Whether static or dynamic, it enables a polished, installable experience — especially for PWAs and mobile-first applications.