Next.js Discord

Discord Forum

GenerateMetadata get current path

Unanswered
ItetsuLaTable posted this in #help-forum
Open in Discord
ItetsuLaTableOP
I want to retrieve the current pathname in my global layout (server component) but I have one params and searchParams in props :/
I search a bit on google and they create a middleware to set the path in a custom header but its not working everywhere when deploying. Is there a good way to get it ?

13 Replies

thomasschwinn
the layout never knows your pathname, you only can get it from a page
ItetsuLaTableOP
Uhm ok!
Currently I'm still using pages folder. I'm starting to migrate to app folder.

In my _app.tsx I have a function which take current path to build canonical url for seo!

I still want to do it globally, that's why I've try with the man layout. In that case, must I call it in every page.tsx or I still call it once globally?
Thrianta
Can I have a look at this?
In my _app.tsx I have a function which take current path to build canonical url for seo!
@ItetsuLaTable Currently I'm still using pages folder. I'm starting to migrate to app folder. In my _app.tsx I have a function which take current path to build canonical url for seo! I still want to do it globally, that's why I've try with the man layout. In that case, must I call it in every page.tsx or I still call it once globally?
joulev
likely you used something like useRouter().pathname. you can reproduce the same behaviour by using a client component rendering the meta tags from the value of usePathname(), but on the server side you cannot get the pathname.
if you want to reproduce the behaviour from the pages router, then do something like
"use client";

export function Meta() {
  const pathname = usePathname();
  return <title>{`${pathname} Page`}</title>;
}

and just use this component in the root layout.

if you want to use the metadata syntax then no it runs on the server so you cannot get the pathname.
@Thrianta Can I have a look at this? `In my _app.tsx I have a function which take current path to build canonical url for seo! `
ItetsuLaTableOP
Here is my code
import { getCanonicalUrl } from '@/lib/utils/url';

function MyApp({
  Component,
  pageProps,
  router,
}: AppProps & { cookies: Cookies }) {

  // Some stuff above

  const path = router?.asPath?.split('?')?.[0];
  const title = t('seo.default.title');
  const description = t('seo.default.description');
  const url = getCanonicalUrl(path);
  return (
    <>
      <Head>
        <meta name="viewport" content={metaContent} />
      </Head>
      {router?.isReady && (
        <DefaultSeo
          title={title}
          description={description}
          canonical={url}
          openGraph={{
            type: 'website',
            url,
            title,
            description
          }}
        />
      )}
       <Component {...pageProps} />
    </>
  );
}
export default MyApp;
joulev
while yes that's technically possible, i don't think that's how canonical URLs are supposed to be used...
canon URLs are used to set the "main" URL of a page (which can be deployed to many URLs). if you simply set it to the pathname, then different URLs will have different canon URLs despite they may be displaying the same page content, which defeats the purpose of the canon URL itself
ItetsuLaTableOP
I have already a function called 
getCanonicalUrl
to get the correct canonical. It will transform the current path to the canonical url when paginate or filtering for exemple
joulev
hmm yes then that works, yup
ItetsuLaTableOP
Ok thank you! I will try this out :blob_wave: