you can use [usePathname](https://nextjs.org/docs/app/api-reference/functions/use-pathname) for client components (if server component see [here](https://nextjs-discord-common-questions.joulev.dev/get-pathname-in-server-components))

Also since your metadata object is tied to a page you already know its path (unless you move it around)

move it around means? @Giant panda

I am unable to understand for server component, how to use it

Tell us first what you want to do in the first place

Typically it's highly discouraged trying to get the current pathname in server components or on the server in general

So if you think you need that it's likely you don't

you're referring that if I am using Metadata in all the pages specifically then no need to get the pathname dynamically, just give static way, like /about, /contact, right?

I mean that I have a file at app/collection/page.tsx and my metadata for it just looks like this:

export const metadata = {
  title: 'Collection'
}

So there is no need to attempt to figure out on which page your are dynamically unless you have dynamic paths like /foo/[id]

but for e.g., we've Blogs page, and Single Blog Page, so for single blog page I want to have twitter & openGraph value dynamically, how can that be achieved?

And the API reference as well: https://nextjs.org/docs/app/api-reference/functions/generate-metadata#parameters

import { Metadata, ResolvingMetadata } from 'next'
 
type Props = {
  params: { id: string }
  searchParams: { [key: string]: string | string[] | undefined }
}
 
export async function generateMetadata(
  { params, searchParams }: Props,
  parent: ResolvingMetadata
): Promise<Metadata> {
  // read route params
  const id = params.id
 
  // fetch data
  const product = await fetch(`https://.../${id}`).then((res) => res.json())
 
  // optionally access and extend (rather than replace) parent metadata
  const previousImages = (await parent).openGraph?.images || []
 
  return {
    title: product.title,
    openGraph: {
      images: ['/some-specific-page-image.jpg', ...previousImages],
    },
  }
}
 
export default function Page({ params, searchParams }: Props) {}

I got this get metadata, then how it'll be used in the Metadata?

This IS the generated metadata

so then I don't need to pass it Metadata, it'll automatically add it to the meta?

That's the whole point of it, yes...

Sorry, I don't meant to bother you guys, but this App Router is pretty new & quite confusing for me,

still we can use Link component from Nextjs or there's a change for it? like for routing from one page to another using the Link/useRouer component?

This is an entirely different question now. And I am a bit on edge since I don't mind people asking questions but I feel you really should invest way more time in reading the docs thoroughly and maybe a second time if something is not clear. In the case of links there is a literal section called Linking: https://nextjs.org/docs/app/building-your-application/routing/linking-and-navigating

still can we still use getServerSideProps(), getStaticProps() and getStaticPaths()

[no](https://nextjs.org/docs/app/building-your-application/upgrading/app-router-migration#step-6-migrating-data-fetching-methods)

then, what can be used?

click on the link and read the docs i linked

I wanted to know that Nextjs App Router is completely server side, so now even to useState what is required for it?