How to Use the app router in Next.js and the manifest.json File

Initially, it should be noted that Next.js is one of the popular and powerful frameworks for building server-side web applications based on React. One of the interesting features of this framework is the App Router, which allows you to easily manage your application's routes. In the latest versions of Next.js, you can utilize file-based routing, which utilizes the directory 'pages'.

Now presume that you intend to create a manifest.json file for your application. This file generally contains information regarding your application and is typically used for progressive web apps (PWA). Information such as the application name, icons, theme color, and more are stored in this file.

In configuring the router in Next.js, you can easily determine simple routes using a four-step process. Additionally, when using manifest.json, you provide users with a better experience that can make them feel they are interacting with an actual application, not just a simple website.

To ensure that your application includes PWA capabilities, you need to add the manifest.json file to your project and place it in the root or public directory. After that, you can utilize the Head component in your files to make this file recognizable.

How to Create manifest.json

First of all, you need to create a file named manifest.json in the public directory of your application. Then you can include the following content inside it. This content contains basic information that is used for the manifest file:

{
    "name": "My Next.js App",
    "short_name": "MyApp",
    "start_url": "/",
    "display": "standalone",
    "background_color": "#ffffff",
    "theme_color": "#000000",
    "icons": [
        {
            "src": "/icon-192x192.png",
            "sizes": "192x192",
            "type": "image/png"
        },
        {
            "src": "/icon-512x512.png",
            "sizes": "512x512",
            "type": "image/png"
        }
    ]
}
    

Line-by-Line Explanation

name - This is the full name of your application that will be displayed when installed.
short_name - A shorter version of the application name for display on the home screen or in app lists.
start_url - The default URL that the app opens after installation.
display - This describes how the application will display after installation; for instance, 'standalone' makes the app look like a native application.
background_color - The background color of the initial screen when the app is launched.
theme_color - The primary color of the application that appears in various UI elements.
icons - An array of icons with different sizes and types used in various displays.