#Hello, do you know how to get the pathname in root layout ??

51 messages · Page 1 of 1 (latest)

gritty meteor
#

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 lolsob 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

Functions: headers | Next.js

API reference for the headers function.

delicate daggerBOT
#
Post created!

🔎 This post has been indexed in our web forum and will be seen by search engines so other users can find it outside Discord

🕵️ Your user profile is private by default and won't be visible to users outside Discord, if you want to be visible in the web forum you can add the "Public Profile" role in id:customize

✅ You can mark a message as the answer for your post with Right click -> Apps -> Mark Solution
(if you don't see the option, try refreshing Discord with Ctrl + R)

crude marsh
#

@gritty meteor does it have to be a server component?

#

the place where you access / use the pathname

median cave
#

If I got the question correctly you need to put some scripts for specific pages right?

gritty meteor
gritty meteor
median cave
gritty meteor
#

Certanly, but It not managed by the CMS, so for every change for example the ads scripts is a new deploy

crude marsh
#

also why are you using opennext, i use nextjs on a vps myself.. i dont see any features lacking

gritty meteor
#

Right, because we are using serverless implementation for AWS, https://sst.dev/

SST
SST

Build modern full-stack serverless applications on AWS with Next.js, SvelteKit, Remix, Astro, Solid, and more.

crude marsh
#

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

median cave
#

Can u share us the layout file, need to get better idea

gritty meteor
median cave
gritty meteor
gritty meteor
gritty meteor
# median cave Elaborate

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

median cave
gritty meteor
#

Correct

median cave
#

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

gritty meteor
#

thank you Parth 🙌

#

By the way I'm using https://www.npmjs.com/package/html-react-parser for render those managed blocks

npm
html-react-parser

HTML to React parser.. Latest version: 5.1.10, last published: 2 months ago. Start using html-react-parser in your project by running npm i html-react-parser. There are 1187 other projects in the npm registry using html-react-parser.

median cave
gritty meteor
#

Hahaha Im a believer

median cave
#

@gritty meteor 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 tag

gritty meteor
#

Interesting 🤔

#

so no matter where I place the <Script> ??

median cave
#

yep

gritty meteor
#

I think that works perfectly for me If I call the services from page.js instead the layout

median cave
gritty meteor
#

so In case of metatags or SEO stuff from generateMetadata in page.js

median cave
gritty meteor
#

you know the SEO guy always blaming the poor traffic on enginner guys jajaja

median cave
#

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">

gritty meteor
#

oh 😶‍🌫️ my bad no good reading of docs

gritty meteor
median cave
#

alright can we say you have got your solution?

gritty meteor
#

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

median cave
#

u did already

gritty meteor
#

see you parth you re awsome

median cave
#

Summary: instead of conditionally defining/rendering seo stuff in your root layout, you can use <meta> and Script tags in your page.js file

median cave