Next.js Discord

Discord Forum

How can I get page's domain inside the page or layout without using headers?

Unanswered
Australian Freshwater Crocodile posted this in #help-forum
Open in Discord
Australian Freshwater CrocodileOP
I need to get page's domain inside the page and layout components. For example, if user opens https://example.com/hello-world, I need to get example.com

But I don't want to use headers() because it will make my whole application to be dynamic. Also, I don't want to turn them into client components because my whole application will be rendered only on client

Is there some kind of a workaround for this?

Thank you!

39 Replies

averydelusionalperson
Also, I don't want to turn them into client components because my whole application will be rendered only on client

I'm confused, WDYM by this?
Australian Freshwater CrocodileOP
I can use window.location inside the page and layout components. But for this, I need to make them client components
averydelusionalperson
so, you aren't on client right?
you need your domain on server component?
Australian Freshwater CrocodileOP
Yes
averydelusionalperson
I think you can use public environment variables
cause, without accessing the request/url. I don't really find a way you can get the domain.
Australian Freshwater CrocodileOP
I think it won't work because my app can get requests from different domains 😦
averydelusionalperson
Oh
Australian Freshwater CrocodileOP
Yeah
😄
averydelusionalperson
Then, headers is the only way I really can think of
Australian Freshwater CrocodileOP
But in this case, none of my API requests will be cached, right? 😦
averydelusionalperson
welllll, you want to use the data from request sent by user, and I personally don't use cache on API routes. IDK
anyways, you're trying to access headers on api routes right?
Australian Freshwater CrocodileOP
Nope, in the page and layout components
I don't use API routes
I have a backend and I use it in order to retrieve the data
averydelusionalperson
yeah, so you can use headers in RSC, it won't really change the much
Australian Freshwater CrocodileOP
Backend is a different project, it's not part of the Next.js application
Australian Freshwater CrocodileOP
Yes but it won't have caching for requests 🤔
Cache will always be skip
Like I'm using an app with a hard reload
averydelusionalperson
hmm, I ain't expert on cache, but the cache is for the fetch function no?
how will the headers change it :thinq:
Australian Freshwater CrocodileOP
Yes, cache is for the fetch function
https://nextjs.org/docs/app/api-reference/functions/headers#headers
averydelusionalperson
yeah, so how would using headers change it? I think fetch is still cached if I'm not wrong
Australian Freshwater CrocodileOP
Hm, let me experiment 🤔
Maybe I'm wrong
averydelusionalperson
maybe I'm too
let me know after you've tried it
Australian Freshwater CrocodileOP
Sure!
Australian Freshwater CrocodileOP
@averydelusionalperson you were right, even though I'm using headers and also cookies, fetch requests are cached!
averydelusionalperson
Noice
Australian Freshwater CrocodileOP
By the way, how would you get the domain from the headers? I'm using host header right now but host may not be present in some cases which is bad =/
averydelusionalperson
I really don't think there is any other way, :thinq: . IDK, if the host is not available put default domain or something