no metadata

[pure burrow]

why in intercepted routing metadata is not working?

[neon rover]

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

---

Based on the knowledge sources, there are several issues with metadata in intercepted routes in Next.js. This is a known problem that has been reported in multiple GitHub issues.

The main reasons why metadata doesn't work properly in intercepted routes are:

1. Missing page files: According to one issue, metadata doesn't get generated for intercepting routes if a "useless" page file is missing. You need to have both a page matching the root route as well as what you're intercepting for metadata to work properly. GitHub Issue #62882

2. Version-specific bugs: Some users reported that metadata in intercepted routes worked in older versions (like 14.1.4) but stopped working in newer versions. GitHub Issue #66510

3. Parallel routes issues: When using intercepted routes with parallel routes, metadata doesn't update correctly. Next.js only evaluates metadata from routes/segments that are actually used for routing/navigation, which doesn't include parallel routes (folders with "@" prefix). GitHub Issue #59316

4. Query parameters: There are issues with intercepting routes when using a combination of URL query parameters, soft navigation, and hard navigation. GitHub Issue #53188

A potential workaround mentioned by one user is to rename files appropriately (e.g., changing default.tsx to page.tsx) and restarting the dev server. Another user implemented a manual solution using React hooks to update the document title when opening and closing modals.

These issues appear to be ongoing, with some reports indicating problems even in recent versions like Next.js 15.2.2 and 15.3.0-canary.40.

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

@pure burrow Kapa.ai is still learning and improving, please let me know how I did by reacting below.

[pure burrow]

@neon rover
There is async generateMetadata function in page.tsx,
and there I fetch post using id (from params) and set metadata from post title

And default exported function (main page function) I fetch post using id again.
Does this mean performance issue?

[neon rover]

Let me check the knowledge base for you again. Give me one moment! :books:

---

Based on the knowledge sources, fetching the same post data twice (once in generateMetadata and once in your page component) can indeed cause a performance issue, but Next.js provides solutions to avoid this duplicate fetching.

The Problem

When you have an async generateMetadata function that fetches data and then fetch the same data again in your page component, you're making duplicate requests to your data source, which is inefficient.

Solutions

Next.js offers two main approaches to solve this:

1. Using React's cache function

You can use React's cache function to memoize your data fetching function, ensuring it only executes once even when called multiple times:

import { cache } from 'react'
import { db } from '@/app/lib/db'

// getPost will be used twice, but execute only once
export const getPost = cache(async (slug: string) => {
  const res = await db.query.posts.findFirst({ where: eq(posts.slug, slug) })
  return res
})

Then use this cached function in both your generateMetadata and page component:

import { getPost } from '@/app/lib/data'

export async function generateMetadata({
  params,
}: {
  params: { slug: string }
}) {
  const post = await getPost(params.slug)
  return {
    title: post.title,
    description: post.description,
  }
}

export default async function Page({ params }: { params: { slug: string } }) {
  const post = await getPost(params.slug)
  return <div>{post.title}</div>
}

This approach is documented in the Next.js documentation Getting Started with Metadata.

2. Using fetch with caching

If you're using the fetch API, Next.js automatically memoizes requests with the same URL and options:

async function getPost(id: string) {
  const res = await fetch(`<https://api.vercel.app/blog/${id}`,> {
    cache: 'force-cache',
  })
  const post = await res.json()
  return post
}

Then use this function in both places:

export async function generateMetadata({ params }) {
  const post = await getPost(params.id)
  return { title: post.title }
}

export default async function Page({ params }) {
  const post = await getPost(params.id)
  // render page with post data
}

This is documented in Data Fetching and Caching.

Note: As of Next.js 15, the default for fetch is cache: 'no-store', so you need to explicitly set cache: 'force-cache' to enable caching.

By implementing either of these approaches, you can avoid the performance issue of duplicate data fetching.

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