How to access pathname in generateMetadata?

[Issaminu]

I'm looking for a way to dynamically generate <title> based on the current pathname.
For example, /store would become title: 'Store' in generateMetadata().
This would also allow for a nested pathname to turn into a nested title, for example /store/hoodies/dark-hoodie could turn into title: 'Store - Hoodies - Dark Hoodie'.

Is there a way to do this currently in Next 13?

[codinginflow]

If it's a dynamic URL param you can get it from the params object inside generateMetadata. Otherwise, you can hardcode it.

[Issaminu]

For a website with a thousand of pages this simply wouldn't be feasible.
Like a docs site for example, where you'd have thousands of non-dynamic URLs, All you need is access to pathname and you'd be able to turn something like /docs/app/api-reference/functions/image-response, into "Functions: Image Response" automatically, otherwise you'll have to individually write out thousands of export const metadata just for the title property.

Having it really seems to be a beneficial a feature for many use-cases.
CC @timneutkens @ijjk 👀

[avivdaniel]

Facing the same issue :( If anyone has an idea

[astateful]

I thought about just reading the name of the current file like so:

var path = require('path'); var pathname = path.basename(__filename);

Have not tried it yet though ;) But I think this should be officially supported by NextJS

[YauhenDev]

[wcaroman]

usePathname doesn't work in server component

[jmacbhc]

Looking around I found a way using headers api.

....
import { headers } from "next/headers";

export async function generateMetadata({ params }: Props): Promise<Metadata> {
  const headersList = headers();
  const pathname = headersList.get("x-invoke-path") || "";

....
}

[janickbraun]

Thank you ma man you safed me 🙏

[FFdhorkin]

this should be in the docs!

[ovidiuwin]

Reading the headers into generateMetadata will automatically make your page Dynamic Rendered which might be something you don't want.

Docs:

During rendering, if a dynamic function or uncached data request is discovered, Next.js will switch to dynamically rendering the whole route. This table summarizes how dynamic functions and data caching affect whether a route is statically or dynamically rendered:

[Issaminu]

Thank you @jmacbhc !
To add to their answer, if you'd like the title to be applied application-wide, make sure to use generateMetadata() in your root app/layout.tsx file.

Furthermore, here's a snippet that turns nested routes to a nicely looking title:

export async function generateMetadata({ params }: Props): Promise<Metadata> {
  const headersList = headers();
  const pathname = headersList.get("x-invoke-path") || "DefaultTitle";
  const pathSegments = pathname.split("/").filter((segment) => segment !== ""); // Split pathname into segments and remove empty segments
  const titleSegments = pathSegments.map(
    (segment) => segment.charAt(0).toUpperCase() + segment.slice(1) // Capitalize the first letter of each segment
  );
  const title = titleSegments.join(" › "); // Join segments with a separator

  return { title };
}  // Example: "/home/profile" turns to "Home › Profile"

Edit: This solution does not work in a Vercel deployment.

[nhatphamwkm]

Hi @Issaminu. It's only working in the local machine, but it isn't working when deployed on the server (Vercel or Netlify).

[Issaminu]

@nhatphamwkm What error is it outputting?

[Issaminu]

@nhatphamwkm Just deployed and I can confirm it fails on deployment. Seems like x-invoke-path doesn't exist in headers() when running on Vercel. I'll reopen the discussion as an issue.

[Issaminu]

While the solution @jmacbhc proposed does work locally, it doesn't work when deploying the app on Vercel, so I opened #54711. Please continue the discussion over there.

[iamursky]

Here is what I'm using for now:

middleware.ts

import { NextResponse, type NextRequest } from "next/server";

export function middleware(request: NextRequest) {
  request.headers.set("x-url", request.url);
  
  return NextResponse.next();
}

layout.tsx

import type { Metadata } from "next";
import { headers } from "next/headers";

export async function generateMetadata(): Promise<Metadata> {
  const url = new URL(headers().get("x-url")!);
  
  console.log(url.pathname);
  
  return {};
}

[Issaminu]

injecting the url in the request headers while it's still in the middleware is a really clever solution! Can confirm it gets the job done (even on deployed builds).
While this is a great workaround, it's obvious that generateMetadata should definitely get access to the full request object.

[k-nearest-neighbor]

Trying this, but headers().get("x-url") is null in layout.tsx after setting it in middleware

[Issaminu]

@k-nearest-neighbor I believe this may be because the routes are not captured in the middleware due to how you matcher is set up.

A workaround would be to make your middleware catch all routes, then handle the "just let this request pass through" logic inside your middleware function instead of inside the matcher regex (and yeah of course you need to inject the x-url header before sending off the request).

[taiwanhua]

@k-nearest-neighbor
I guess you have custom NextResponse,some thing like :

export async function middleware(
  request: NextRequest,
): Promise<NextResponse | undefined> {
  const requestHeaders = new Headers(request.headers);

  // to get pathname in generateMetadata , you need set "x-url here
  requestHeaders.set"x-url", request.url);

  const response = NextResponse.next({
    request: {
      headers: requestHeaders,  //  put your headers here
    },
  });
 
  if (request.nextUrl.pathname.startsWith("/api")) {
    // conditional do something ...
  }

  return response;
}

[lucgagan]

Does not seem to work in Next.js v14 anymore?

[faisalamin9696]

Working in Next 14 middleware.ts

import ...
export function middleware(request: NextRequest) {
    request.headers.set('pathname', request.nextUrl.pathname);

    if (request.nextUrl.pathname.startsWith('/@')) {
        return NextResponse.rewrite(new URL('/profile', request.nextUrl), { headers: request.headers });
    }
}

layout.ts

export function generateMetadata({ params, searchParams }, parent) {
    const headersList = headers();
    const pathname = headersList.get("pathname");

    console.log(1122, params, pathname)
    return {
        title: 'Hello World',
        description: 'Checking',
    }
}

[mkoreo]

The answers in this thread work but will make the route dynamically rendered instead of statically, because of calling headers().

As per Next.js Documentation on https://nextjs.org/docs/app/api-reference/functions/headers

Good to know:
headers() is a Dynamic Function whose returned values cannot be known ahead of time. Using it in a layout or page will opt a route into dynamic rendering at request time.

I don't think this the best solution.

[joshunger]

You also really need pathname when generating alternates in generateMetadata.

[landsman]

This have to be joke about developer UX 😢

[Issaminu]

After some consideration, I'm reopening this as the current solution is not giving access to pathname in generateMetadata(), it's injecting it while it's in the middleware, so that it's a header that we can access once it reaches the page. While it does work, it remains a janky workaround.
We still need to have access to attributes of the Request object in generateMetadata(), and that is something that remains impossible to do.

[boylec]

Importantly: this proposed solution doesn't work.

It forces every page to be dynamically rendered per web request at runtime instead of rendered once at build time.

[mauriciabad]

This is not your case, but I'd like to point out that:

If you were trying to access the pathname to build a URL, you actually wouldn't need to do it. Using metadataBase would be enough.

It looks like this:

export const metadata = {
  metadataBase: new URL('https://acme.com'),
  alternates: {
    canonical: '/',
    languages: {
      'en-US': '/en-US',
      'de-DE': '/de-DE',
    },
  },
  openGraph: {
    images: '/og-image.png',
  },
}

[lhguerra]

how does this answer the question in the issue title? ther is no access to pathname whatsoever, just a static object

[mauriciabad]

You're right that it doesn't directly answer the question. I'll add a disclaimer to the message and re-phrase it.

I commented it because when you google about the topic, this discussion comes up. In my case, I was looking to access pathname to generate the canonical URL, but I actually didn't need to access it as long as metadataBase is configured. I thought that this would be useful for other people having a similar issue, more than the reporter himself.

[yanxiang-wang]

Same to me, I also want to set the canonical URL for each page but cannot find a solution yet.

[landsman]

This should be part of the official documentation

[kirkouimet]

+1, this is a significant issue with any website trying to manage titles properly. We need access to the URL and path name in generateMetadata.

[andrewslock]

I need this too to set the right language alternatives. I am using

 alternates: {
      languages: {
        en: "/en",
        ka: "/ka",
        "x-default": "/ka",
      },
    },

but for page mywebsite.com/a/b/c/d/product/123 I need to set the correct metadata to be

alternates: {
     languages: {
       en: "mywebsite.com/en/a/b/c/d/product/123",
       ka: "mywebsite.com/ka/a/b/c/d/product/123",
       "x-default": "mywebsite.com/ka/a/b/c/d/product/123",
     },
   },

but I have no idea about the right way to access the pathname

[SongRongLee]

I'm seeking a method to automatically populate the openGraph.url field based on the URL path for my statically rendered pages. I presume Next.js already recognizes the path of the accessed page due to the app router folder structure. Otherwise, if I relocate a page within the app directory, I would need to manually adjust the openGraph.url (along with other URL-related fields), which could be prone to errors. This might highly related to the feature this post is asking for.

[chris-covali]

After digging a little bit in generateMetadata params it seems there is an "unsafe" way to do that without opting out from cache.
The path is available in async local storage of the second parameter generateMetadata receives, and the only way to grab is iterating through promise symbols.

/**
 * Get the pathname from the metadata state
 * This dives into async storage of promise state to get the pathname
 *
 * This is much more performant that using headers() from next as this doesn't opt out from the cache
 * @param state
 */
export const getPathnameFromMetadataState = (state: any): string | undefined => {
  const res = Object.getOwnPropertySymbols(state || {})
    .map(p => state[p])
    .find(state => state?.hasOwnProperty?.("urlPathname"))

  return res?.urlPathname.replace(/\?.+/, "")
}

export async function generateMetadata(_: any, state: any): Promise<Metadata> {
  const metaByPath = await fetchMetadataByPath()
  const pathname = getPathnameFromMetadataState(state) ?? ""
  const { title, description } = metaByPath[pathname] || {}

  return {
    title,
    description,
  }
}

Pretty ugly, but it gets the job done 🤷‍♂️

[ogi-joo]

This is the best solution

[adityaa72]

This works for Next Js 15

export const generateMetadata = async (props: Props, state: any) => {
  // eslint-disable-next-line @typescript-eslint/no-unsafe-assignment
  const pathname = Object.getOwnPropertySymbols(state)
    .map((item) => state[item])
    .find((state) => state?.hasOwnProperty("url"))?.url?.pathname;
  console.log("pathname:->", pathname);
};

[linhnguyendeveloper]

Where is the function fetchMetadataByPath come from ?

[linhnguyendeveloper]

Where is the function fetchMetadataByPath come from ?

[rik-iso]

This is probably what https://nimpl.tech/getters is doing under the hood, so you can try that too. Works a charm for us. Also works in layouts etc (but use at your own risk in a layout, remember they don't rerender on nav)

[rhulse]

Adding another approach in case it helps someone. :-)

If you are receiving params, and it happens to be a catchall segment, this might work for you:

Folders:

app/products/[...product]

Then you might be able to do this:

export async function generateMetadata(params: {
  params: { product: [...parts: string[]] };
}): Promise<Metadata> {
  const {
    params: {
      product: [slug, id]
    }
  } = params;
 
// reconstitute URL from product, slug and id
const url = `${DOMAIN_FROM_SOMEWHRE}/products/${slug}/${id}`;  
}```
 

[JoseCWise]

Is there a solution for this that doesn't involve making requests or getting headers?

[Issaminu]

According to this comment by @delbaoliveira , the reason why this is not possible currently is that Next.js restricts access to "request-time" data included in the Request object because it wants to have visibility over where this data is being accessed, and turn these access points to SSR instead of building them statically on build-time, and it does this by providing cookies() and headers() functions. The goal behind this is that by restricting from where the request-time info is fetched into just a few specific channels, they can track and isolate these pages in order to make them SSR.

This goal is not affected by what we're trying to do here.

What we need here is a way to identify the current route on build-time in generateMatadata(), as that would allow the function to automatically create a title meta tag for each page that would be corresponding to it's pathname. This will not affect the effort to restrict access to request-time information. Which is why I suggest having a unique pathname() function that is only accessible in Server Components where there are no calls to get Request information with cookies() or headers().