get pathname in server component
Unanswered
πΉπΎ_π·πππππππππππ π posted this in #help-forum
We can get the pathname using next/headers but there is one problem here. It only works when we use next/link but whenever we reload the page it doesn't work and we get null value when accessing next-url from headers:
I tried creating a middleware in app/middleware.ts:
And access it one of my component which is showing me null value while getting this x-url from headers.
Is there any way I can access pathname in server components?
const headersList = headers();
const pathname = headersList.get("next-url");I tried creating a middleware in app/middleware.ts:
// /middleware.ts
import { NextResponse } from "next/server";
export function middleware(request: Request) {
// Store current request url in a custom header, which you can read later
const requestHeaders = new Headers(request.headers);
requestHeaders.set("x-url", request.url);
return NextResponse.next({
request: {
// Apply new request headers
headers: requestHeaders,
},
});
}And access it one of my component which is showing me null value while getting this x-url from headers.
Is there any way I can access pathname in server components?
13 Replies
@πΉπΎ_π·πππππππππππ π We can get the pathname using next/headers but there is one problem here. It only works when we use next/link but whenever we reload the page it doesn't work and we get null value when accessing next-url from headers:
const headersList = headers();
const pathname = headersList.get("next-url");
I tried creating a middleware in app/middleware.ts:
// /middleware.ts
import { NextResponse } from "next/server";
export function middleware(request: Request) {
// Store current request url in a custom header, which you can read later
const requestHeaders = new Headers(request.headers);
requestHeaders.set("x-url", request.url);
return NextResponse.next({
request: {
// Apply new request headers
headers: requestHeaders,
},
});
}
And access it one of my component which is showing me null value while getting this x-url from headers.
Is there any way I can access pathname in server components?
ItΓ’β¬β’s fundamentally impossible. What you did is pretty much the closest workaround you can get, and as you already see, itΓ’β¬β’s a flawed workaround and is not reliable
that means either we have to pass the params at the page level to the child component by props drilling or use client directive for that to get the pathname ?
but my middleware is not working...is there anything wrong i am doing ? Like i created a middleware at app/middleware.ts then i just used next/headers in a child component to get pathname which I have set in the middleware. Although, I haven't used that middleware anywhere
@πΉπΎ_π·πππππππππππ π that means either we have to pass the params at the page level to the child component by props drilling or use client directive for that to get the pathname ?
by props drillingthat part can be handled by https://github.com/manvalls/server-only-context, but that's pretty much the way to get params in server components
@πΉπΎ_π·πππππππππππ π but my middleware is not working...is there anything wrong i am doing ? Like i created a middleware at app/middleware.ts then i just used next/headers in a child component to get pathname which I have set in the middleware. Although, I haven't used that middleware anywhere
middleware is not the way to reliably retrieve the params so i will decline to comment
yeah...Well, I guess I will have to do something from the backend
@joulev ItΓ’β¬β’s fundamentally impossible. What you did is pretty much the closest workaround you can get, and as you already see, itΓ’β¬β’s a flawed workaround and is not reliable
I might sound dumb here but shouldn't the server have a way to know what path has invoked what function?
Surely somewhere inside NextJS (the library) would the code know what path has invoked which HTML/JSX code
Can't help but wonder if this is a flaw in the lib (maybe on React's end but in a lib nonetheless)
@πΉπΎ_π·πππππππππππ π We can get the pathname using next/headers but there is one problem here. It only works when we use next/link but whenever we reload the page it doesn't work and we get null value when accessing next-url from headers:
const headersList = headers();
const pathname = headersList.get("next-url");
I tried creating a middleware in app/middleware.ts:
// /middleware.ts
import { NextResponse } from "next/server";
export function middleware(request: Request) {
// Store current request url in a custom header, which you can read later
const requestHeaders = new Headers(request.headers);
requestHeaders.set("x-url", request.url);
return NextResponse.next({
request: {
// Apply new request headers
headers: requestHeaders,
},
});
}
And access it one of my component which is showing me null value while getting this x-url from headers.
Is there any way I can access pathname in server components?
Yellowhead catfish
why not just make a client component that displays the pathname and then using that in the server component? thats what i did with my navbar
@GetPsyched I might sound dumb here but shouldn't the server have a way to know what path has invoked what function?
Yes, that is known as middleware + headers. BUT: you only know what was the pathname of the first request, all subsequent requests inside the same layout wonβt be caught because the layout is static. There are no flaws here, everything works as expected.
Hmm
Makes sense