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:

[firmart]

@ovidiuwin In other words, according the docs, if you have already used the below APIs, you can safely read the headers because the page is already dynamicaly rendered.

cookies()
unstable_noStore()
unstable_after()
searchParams prop

[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.

[Vjallmysons]

But its not working in dev server

[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 {};
}

[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?

[keepchen]

Thanks to @iamursky @taiwanhua . After some tweaks, I've got it working properly. It's now in production. Here's a sample of my code:

• middleware.js

...
import { NextRequest, NextResponse } from 'next/server'
...

export function middleware(request) {
	const { pathname } = request.nextUrl
	request.headers.set('x-pathname', pathname)
	const response = NextResponse.next({
		request: {
			headers: request.headers,  //  put your headers here
		},
	})

	if (pathname.endsWith('...')) {
		return response
	}

	request.nextUrl.pathname = `/`
	return Response.redirect(request.nextUrl)
}

• layout.js

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

export async function generateMetadata() {
	const headersList = headers()
	const lang = headersList.get('x-pathname') ? headersList.get('x-pathname') : '/'
	// console.log('========================== headers ==========================')
	// headersList.forEach((v, k) => {
	// 	console.log(`${k}=${v}`)
	// })

	return {
            ....
	}
}

Next.js version

14.2.4

You can visit the production environment address and see that the server returns different metadata data by specifying different language paths.
Such as:

https://stardots.ink/ja

https://stardots.ink/ru

https://stardots.ink/zh

https://stardots.ink

[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',
    }
}

[mengqing]

This is the only way that works for me

[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 🤷‍♂️

[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)

[rafalzawadzki]

If you need the host, this works:

export const getHostFromMetadataState = (
  props: any,
  state: any
): string | undefined => {
  const res = Object.getOwnPropertySymbols(state || {})
    .map(p => state[p])
    .find(state => state?.hasOwnProperty?.('incrementalCache'))
  return res?.incrementalCache?.requestHeaders?.host
}

[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().

[camillevingere]

It is possible to access to it from page.tsx (and not layout) through the middleware :

export const generateMetadata = async (): Promise<Metadata> => {
  const headerList = headers();
  const pathname = headerList.get('x-current-path');
}

[skylarmb]

I have figured out a way to generate dynamic canonical tags for each page based on the page path in a static export site. This method also works for other fields that work with the metadataBase field (see docs). This does not answer the original question directly, but I hope it helps someone achieve their goals.

// app/layout.tsx
export const metadata: Metadata = {
  metadataBase: new URL("https://yourwebsite.com"),
  alternates: {
    canonical: "./", // note this is ./, not / !!!
  },
};

The value of ./ results in the correct value being dynamically constructed for the canonical tags on every generated page, e.g.

<link rel="canonical" href="https://yourwebsite.com/foo/bar/baz">

The behavior should be documented.

[jordn]

THANK YOU!!!! I can't believe this was so hard to discover

[BeeFriedman]

Omg!! I was going through the docs, trying ChatGPT and Googling, but nothing helped until I found this!

Thanks!

[AndiCover]

What about the language links?

// app/layout.tsx
export const metadata: Metadata = {
  metadataBase: new URL("https://yourwebsite.com"),
  alternates: {
    canonical: "./", // note this is ./, not / !!!
    languages: {
      en: './', ?
      de: './', ?
    }
  },
};

[mengqing]

Works for canonical, but doesn't work for languages :(

[i0n-]

For more information that explain why there is no official support for this check this: #43704 (comment)

[Issaminu]

The issue is that generateMetadata() was not meant for built-time (which is what we need here), it was meant for run-time, when dynamic metadata that become available when the request hits the server, while the const metadata object is fully static and written by the developer.
What we need is something a function that runs on build-time and can just use the current route of the current page.tsx | layout.tsx to generate the <title> tag that get embedded to the <head> of the static html files generated on build-time.

[M4jx]

I found out that using "./" in the URL property of openGraph correctly generates the full URL for og:url. It's surprising that this isn't documented!

Just set metadataBase to your application's base URL and then set the url property to "./" and you are good to go.

Example (generateMetadata):

export async function generateMetadata() {
  return {
    metadataBase: new URL(process.env.NEXT_PUBLIC_BASE_URL!),
    openGraph: {
       type: "website",
       url: "./",
    },
}

Tested in Next.js v15.

Note for i18n users:

When using i18n the og:url is set to the route name as defined in you project files and does not adjust to the URL provided by i18n.

[guendev]

generateMetadata and metadata are executed in order. If you define canonical: './' in the root layout, you can access the pathname in the parent parameter of every child generateMetadata function.
Docs: Generate Metadata

in my case:

RootLayout/LocaleLayout

export async function generateMetadata(
  _: Promise<{ locale: string }>,
  parent: ResolvingMetadata,
): Promise<Metadata> {
  const { alternates } = await parent;

  //  Format the current URL: ./[locale]/...
  console.log(alternates?.canonical?.url) // current URL => pathname
}

[ronniechoyy]

you save my life man, that's work, thank you very much!

[Issaminu]

Another interesting solution by @alfonsusac is to use Parallel Routes as a way to get Next into giving access to pathnames in generateMetadata() by tricking it into thinking it's a dynamic route, this will give generateMetadata the same params which contains the pathname that dynamic routes receives. This is the closest solution I've seen to what we're trying to do here.

Here's how to do it:

1. Create a /app/@somethingHere, whatever you write after the @ doesn't matter.
2. Inside /app/@somethingHere make a catch all folder with a page.tsx /app/@somethingHere/[...slug]/page.tsx
3. Inside that file write your generateMetadata():

export async function generateMetadata(props: {
  params: Promise<{ slug: string[] }>;
}) {
  const {slug} = await props.params;  // slug contains the full pathname as array

  return {
    title: "/" + slug.join("/"),
    description: "Generated by create next app",
  };
}

Now on build-time, Next will try to get all the pages of the application, then generate their metadata tags as if they are dynamic pages, even if they aren't.

Here's alfonsusac's PoC for this.

I haven't tested it extensively, please comment here if you find edge cases where it breaks.

Now while this solution works, I'm not going to mark it as answer since it's also a hacky solution that suprisingly works. But I still stand by my opinion that getting pathname is generateMetadata() should be supported, see my previous comment for details.