viewport, metadata and not nested

[gaunt tendon]

for some reason when i put metadata or viewport on root layout it not automatically extends to other pages. i would like to put basic metadata and viewport settings for whole app and overwrite it on page basis if needed

[dry jetty]

Hi @gaunt tendon. I'm kapa.ai, your friendly support bot. I will try to answer your question by searching through the knowledge base. :wave:

---

In Next.js, you can define the viewport and metadata for your entire application in the root layout file and then override them on a per-page basis if needed. However, there are some important points to note:

1. Viewport: You can customize the initial viewport of the page with the static viewport object or the dynamic generateViewport function. These are only supported in Server Components and you cannot export both from the same route segment. If the viewport doesn't depend on runtime information, it should be defined using the static viewport object rather than generateMetadata. Here's an example of how to define the viewport options:

import type { Viewport } from 'next'
 
export const viewport: Viewport = {
 themeColor: 'black',
}
 
export default function Page() {}

2. Metadata: The viewport option in metadata is deprecated as of Next.js 14. You should use the viewport configuration instead. Metadata is evaluated in order, starting from the root segment down to the segment closest to the final page.js segment. Metadata objects exported from multiple segments in the same route are shallowly merged together to form the final metadata output of a route. Duplicate keys are replaced based on their ordering. This means metadata with nested fields that are defined in an earlier segment are overwritten by the last segment to define them.

3. Overriding: File-based metadata has the higher priority and will override any config-based metadata. You can overwrite the default viewport meta tag.

If you're migrating metadata exports, you can use metadata-to-viewport-export codemod (https://nextjs.org/docs/app/building-your-application/upgrading/codemods#metadata-to-viewport-export) to update your changes.

For more details, you can refer to the following documentation:

• generateViewport (https://nextjs.org/docs/app/api-reference/functions/generate-viewport)
• Metadata Object and generateMetadata Options (https://nextjs.org/docs/app/api-reference/functions/generate-metadata)
• Optimizing Metadata (https://nextjs.org/docs/app/building-your-application/optimizing/metadata)

---

Note: you can ask me a follow up question by @ mentioning me again :speech_balloon:

@gaunt tendon kapa.ai is still learning and improving, please let us know how it did by reacting below

[gaunt tendon]

@dry jetty viewport is simply not working, just not making any changes for any page

[dry jetty]

Let me check the knowledge base for you. One moment! :books:

---

If the viewport settings are not reflecting on your pages, there could be a few reasons for this:

1. Server Components: The viewport object and generateViewport function exports are only supported in Server Components. Make sure you're using Server Components.

2. Exporting Both: You cannot export both the viewport object and generateViewport function from the same route segment. If you're doing this, it could be causing the issue.

3. Version: There was a known issue in Next.js where the viewport meta tag was missing in the HTML, and the viewport value was incorrect. This issue was reported in version 14.0.0 and was fixed in version 14.0.1. Make sure you're using the latest version of Next.js. If you're using an older version, consider updating it.

4. Migration: If you're migrating from metadata exports, make sure you've used the metadata-to-viewport-export codemod (https://nextjs.org/docs/app/building-your-application/upgrading/codemods#metadata-to-viewport-export) to update your changes.

If you're still facing issues, please provide more details or consider opening an issue in the Next.js GitHub repository (https://github.com/vercel/next.js/issues).

Note: you can ask me a follow up question by @ mentioning me again :speech_balloon: