Hello, do you know how to get the pathname in root layout ??
Answered
Reddish carpenter ant posted this in #help-forum
Reddish carpenter antOP
Hello everybody,
I got this situation.
In my case the <head></head> scripts, and some SEO stuff are managed by the CMS, for example analytics scripts, ads scripts, and those scripts sometimes depends of the pathname criteria, like home, article, section etc. for example an article like "/news/the-future-of-ai" has some customs ads scripts and custom ld+json differents from the section like "/news"
So I have to place these services in root layout.js but I didn't find the way to get the pathname.
I tried placing the layout.js inside the "catch-all" route [...slug]/layout.js and get the params from the component arguments and It works, but for more than 300k articles get a nightmare for performance.
Of course, the entire route name "/news/the-future-of-ai" with the article and section, are also managed by the CMS. The headeless deliver the content type with the pathname query.
I also tried with headers injection in the middleware setting a custom header, something like x-pathname=/news/the-future-of-ai and then get the header in root layout by https://nextjs.org/docs/app/api-reference/functions/headers and it works, but
I'm using a self-hosted AWS server and the opennext lib doesn't fix that till v3 which I'm cosidering upgrade, buut jaja not now
So, I'm run out of ideas, if you handsome guy reading this post, maybe knows another way to get the pathname from the main root layout. I really appreciate your advice.
Regards
I got this situation.
In my case the <head></head> scripts, and some SEO stuff are managed by the CMS, for example analytics scripts, ads scripts, and those scripts sometimes depends of the pathname criteria, like home, article, section etc. for example an article like "/news/the-future-of-ai" has some customs ads scripts and custom ld+json differents from the section like "/news"
So I have to place these services in root layout.js but I didn't find the way to get the pathname.
I tried placing the layout.js inside the "catch-all" route [...slug]/layout.js and get the params from the component arguments and It works, but for more than 300k articles get a nightmare for performance.
Of course, the entire route name "/news/the-future-of-ai" with the article and section, are also managed by the CMS. The headeless deliver the content type with the pathname query.
I also tried with headers injection in the middleware setting a custom header, something like x-pathname=/news/the-future-of-ai and then get the header in root layout by https://nextjs.org/docs/app/api-reference/functions/headers and it works, but
I'm using a self-hosted AWS server and the opennext lib doesn't fix that till v3 which I'm cosidering upgrade, buut jaja not nowSo, I'm run out of ideas, if you handsome guy reading this post, maybe knows another way to get the pathname from the main root layout. I really appreciate your advice.
Regards
Answered by Spotted Rail
Summary: instead of conditionally defining/rendering seo stuff in your root layout, you can use
<meta> and Script tags in your page.js file49 Replies
@Reddish carpenter ant does it have to be a server component?
the place where you access / use the pathname
Spotted Rail
If I got the question correctly you need to put some scripts for specific pages right?
@Arinji <@1237426248075051080> does it have to be a server component?
Reddish carpenter antOP
Hello, yes It's because the SEO for some of that scripts, has to be in the initial rendering
@Spotted Rail If I got the question correctly you need to put some scripts for specific pages right?
Reddish carpenter antOP
Yes, It depends from the pathname, It can be different content type article, section
@Reddish carpenter ant Yes, It depends from the pathname, It can be different content type article, section
Spotted Rail
What if u could put those scripts directly into the page instead? That works for u?
Reddish carpenter antOP
Certanly, but It not managed by the CMS, so for every change for example the ads scripts is a new deploy
also why are you using opennext, i use nextjs on a vps myself.. i dont see any features lacking
Reddish carpenter antOP
Right, because we are using serverless implementation for AWS, https://sst.dev/
ah that makes sense
yea sorry no clue myself then, i would usually just go the headers route but you seem to not be able to
Spotted Rail
Can u share us the layout file, need to get better idea
@Arinji yea sorry no clue myself then, i would usually just go the headers route but you seem to not be able to
Reddish carpenter antOP
they seems to fix that in v3 but Im not ready for upgrade https://ion.sst.dev/
@Spotted Rail Can u share us the layout file, need to get better idea
Reddish carpenter antOP
of course
@Reddish carpenter ant of course
Reddish carpenter antOP
here I'm using the headers strategy
@Spotted Rail Elaborate
Reddish carpenter antOP
My CMS is Drupal, so they managed the structure with blocks, these blocks are configured with sort of visibilty with the pathname, they show/hide the blocks depending the pathname, so as you can see the pathname is our initial point of our decoupled web services.
So, these blocks can be scripts in <head>, can be structured data like json ld, And It is managed by content administrators
So, these blocks can be scripts in <head>, can be structured data like json ld, And It is managed by content administrators
@Reddish carpenter ant My CMS is Drupal, so they managed the structure with blocks, these blocks are configured with sort of visibilty with the pathname, they show/hide the blocks depending the pathname, so as you can see the pathname is our initial point of our decoupled web services.
So, these blocks can be scripts in <head>, can be structured data like json ld, And It is managed by content administrators
Spotted Rail
Okay so let me know if the following statement is correct.
U have different scripts for different pages.
For instance: /news will have script A
/xyz will have script B
U have different scripts for different pages.
For instance: /news will have script A
/xyz will have script B
Reddish carpenter antOP
Correct
Spotted Rail
OK that is certainly something I've come accross with one of my previous projects
I'll share u how I did it in a while
Reddish carpenter antOP
thank you Parth 🙌
By the way I'm using https://www.npmjs.com/package/html-react-parser for render those managed blocks
@Reddish carpenter ant thank you Parth 🙌
Spotted Rail
Don't thank me yet xD
Reddish carpenter antOP
Hahaha Im a believer
Spotted Rail
@Reddish carpenter ant the solution is pretty simple
U can use the
<Script> from import Script from "next/script"; in any page and it will inject it in your head tagReddish carpenter antOP
Interesting 🤔
so no matter where I place the <Script> ??
Spotted Rail
yep
Reddish carpenter antOP
I think that works perfectly for me If I call the services from page.js instead the layout
Also checkout the startegy prop https://nextjs.org/docs/app/api-reference/components/script
Reddish carpenter antOP
so In case of metatags or SEO stuff from generateMetadata in page.js
@Reddish carpenter ant so In case of metatags or SEO stuff from generateMetadata in page.js
Spotted Rail
ofc, were u doing it all this time in layout file?
@Spotted Rail ofc, were u doing it all this time in layout file?
Reddish carpenter antOP
oh no sometimes came with managed blocks like <meta> stuff
you know the SEO guy always blaming the poor traffic on enginner guys jajaja
Spotted Rail
u can put meta and script tags in your page.js file and nextjs is smart enough to put it inside the head tag
but for the script tag you have to use
strategy prop: <Script strategy="beforeInteractive">Reddish carpenter antOP
oh 😶🌫️ my bad no good reading of docs
@Spotted Rail u can put meta and script tags in your page.js file and nextjs is smart enough to put it inside the head tag
Reddish carpenter antOP
that is awesome
Spotted Rail
alright can we say you have got your solution?
Reddish carpenter antOP
yeah absolutely Im reading the blocks and I got another things that can be placed in body so yeah, I really appreciate your help today
now can I say thank you ? jajaja
Spotted Rail
u did already
Reddish carpenter antOP
see you parth you re awsome
Spotted Rail
Summary: instead of conditionally defining/rendering seo stuff in your root layout, you can use
<meta> and Script tags in your page.js fileAnswer
@Spotted Rail Summary: instead of conditionally defining/rendering seo stuff in your root layout, you can use `<meta>` and `Script` tags in your `page.js` file
Spotted Rail
@Reddish carpenter ant can u mark this as answer