#https twitter com asidorenko status
mint void
okay thanks, I tried this and it worked:
import ClientC from "./Client";
import ServerC from "./ServerC";
export default function Page() {
return (
<ClientC>
{/* @ts-expect-error Async Server Component */}
<ServerC />
</ClientC>
);
}
but the problem is that I need to pass in the current url path to ServerC. I Was doing this by changing this code to use client and then pass in the url, but then it gives more errors if I change this to use client. How can I go around this?
north wedge
You can't directly get the current URL in server-side child components and have to pass down the info from the layout and page components since your know where they are mounted.
mint void
Yeah i know i was trying to pass the info (url) from the client component to the server component, thats what i was trying to refer to in the first message in this thread, sorry for any confusion
north wedge
You can't.
If your component requires the current URL it must be a client component as well.
mint void
so you're saying I can't
- Get current url in client component
- Pass that as props into a server component
?
north wedge
Think of it for a moment: you can't send data from a client-component to a server-rendered component.
It makes no sense.
So if you can't make it work to pass down path params from the page/layout you must make that branch of your DOM tree client-side instead.
mint void
hmm.. okay.
So let's say I wanted to build a blog website, with dynamically rendered routes for each blog id. In a scenario like this, where the rendered blog/[id]/page.tsx needs the id to render the blog post.
In this case, server rendering isn't possible?
The reason why I'm asking is because I thought I saw an example of the scenario I just mentioned in the stable version of nextjs
north wedge
It is, the page.tsx can get the id, but not the full URL
mint void
how can it get the id? That's what I need aswell, not the full URL
north wedge
const Layout = async ({
children,
params
}: {
readonly children: ReactNode;
readonly params: { readonly id: string };
}) => {
// id is in params.id
}
It's all described here: https://beta.nextjs.org/docs/routing/defining-routes#dynamic-segments
mint void
ohhh wow
so this worked:
layout.tsx
export default async function Layout({
children,
params,
}: {
readonly children: React.ReactNode;
readonly params: { readonly id: string };
}) {
return <>{children}</>;
}
page.tsx
import ClientC from "./Client";
import ServerC from "./ServerC";
export default function Page({ params }: { params: { id: string } }) {
console.log(params);
return (
<ClientC>
{/* @ts-expect-error Async Server Component */}
<ServerC />
</ClientC>
);
}
when I log the params I get the current Id
but.. how? I'm not referencing the params in the return statement (of the layout, I'm not passing them down to the children)?
Read this https://beta.nextjs.org/docs/api-reference/file-conventions/layout and seems like they get passed down automatically somehow
anyways, thanks a ton for the help and putting up with my lack of knowledge, really appreciate it