passing props to server comps from server comp

Unanswered

Peterbald posted this in #help-forum

Open in Discord

PeterbaldOP

2023-10-28T20:02:51.000Z

howc an this be done

44 Replies

riský

2023-10-28T23:12:38.000Z

im not sure if i understand... you can pass them like react components could always...

PeterbaldOP

2023-10-28T23:26:49.000Z

the thing is i need to do it as children

so map over children

and apply it to to each and it doesn't work

riský

2023-10-28T23:28:35.000Z

can you show what "didn't work"

PeterbaldOP

2023-10-28T23:30:44.000Z

import {Sidebar} from "@/app/Sidebar";
import React from "react";


interface IAuthorizedPage {
    children: React.ReactNode
}
async function AuthorizedPage(props: IAuthorizedPage) {


  return (
    <main className="flex w-screen h-screen bg-zinc-800">
      <Sidebar></Sidebar>
        <div className={"grow"}>
            {React.Children.map(props.children, (child: React.ReactNode) => {
                return React.cloneElement(child, {
                    name: "ch",
                } as any);
            })}
        </div>
    </main>
  )
}

export default AuthorizedPage;

import './globals.css'
import React from "react";
import AuthorizedPage from "@/app/AuthorizedPage";


// export const metadata = {
//     title: 'Create Next App',
//     description: 'Generated by create next app',
// }

interface IRootLayoutProps {
    children: React.ReactNode
}

export default function RootLayout(props: IRootLayoutProps)

{
    return (
        <html lang="en">
        <body>
        <AuthorizedPage>{props.children}</AuthorizedPage>
        </body>
        </html>
    )
}

export async function Page(props: any)  {

    return (
        <h1 className={"grow text-3xl text-white"}>Props: {JSON.stringify(props)}</h1>
    )
}

export default Page;

the h1 here is not showing the a prop

riský

2023-10-28T23:33:31.000Z

What are you doing with React.Children

It's just props.children.map directly

PeterbaldOP

2023-10-28T23:34:41.000Z

Error: props.children.map is not a function

@Peterbald js import {Sidebar} from "@/app/Sidebar"; import React from "react"; interface IAuthorizedPage { children: React.ReactNode } async function AuthorizedPage(props: IAuthorizedPage) { return ( <main className="flex w-screen h-screen bg-zinc-800"> <Sidebar></Sidebar> <div className={"grow"}> {React.Children.map(props.children, (child: React.ReactNode) => { return React.cloneElement(child, { name: "ch", } as any); })} </div> </main> ) } export default AuthorizedPage;

Marchy

2023-10-28T23:43:32.000Z

I'm not really sure what you're doing here or why. Why are you mapping children? Why are you using React.cloneElement? Authentication should be handled in middleware, not with context on your root layout.

PeterbaldOP

2023-10-28T23:43:46.000Z

midddleware? can you explain this a bit more?

i know what middleware is

@Marchy I'm not really sure what you're doing here or why. Why are you mapping children? Why are you using React.cloneElement? Authentication should be handled in middleware, not with context on your root layout.

riský

2023-10-28T23:44:40.000Z

yeah this tbh, this code is so weird to me

PeterbaldOP

2023-10-28T23:44:48.000Z

i didn't know you could persit state in middleware

@Peterbald midddleware? can you explain this a bit more?

Marchy

2023-10-28T23:45:06.000Z

https://authjs.dev/

I would look into next-auth (apparently now Auth.js?)

PeterbaldOP

2023-10-28T23:45:15.000Z

will this still be fine

if i use rust jwts to authenticate

Marchy

2023-10-28T23:45:25.000Z

yes

There's some extra config with jwts - you should treat next like an independent microservice

@Peterbald if i use rust jwts to authenticate

Marchy

2023-10-28T23:46:31.000Z

Are you using rust just for auth?

PeterbaldOP

2023-10-28T23:46:53.000Z

yes pretty much,rust and postgres for everything

@Peterbald yes pretty much,rust and postgres for everything

Marchy

2023-10-28T23:49:58.000Z

Are you using a rust API? Just curious as to why, if there is a reason

PeterbaldOP

2023-10-28T23:50:29.000Z

well my entire backend is rust does that clear it up?

riský

2023-10-28T23:50:59.000Z

imo using nextjs but with seperate backend kinda removes most of its purpose... (but thats unrelated here)

PeterbaldOP

2023-10-28T23:51:52.000Z

how so?
is it to do with the lateny between server side requests when they are hosted on the same server?

I just like rust's saftey

riský

2023-10-28T23:52:29.000Z

its just server rendering and nextjs is designed to be the full stack framework and not half, not to say it won't work but its prob harder

@Peterbald how so? is it to do with the lateny between server side requests when they are hosted on the same server?

Marchy

2023-10-28T23:53:02.000Z

It's more of having 2 backends, makes sense if you have a bunch of other services connecting to it but wasn't sure if you were using it just for your Next.js app

PeterbaldOP

2023-10-28T23:53:23.000Z

well why can't i enjoy the benefits of server side rendering while also the enjoying what rust brings

@Peterbald well why can't i enjoy the benefits of server side rendering while also the enjoying what rust brings

Marchy

2023-10-28T23:56:14.000Z

I mean, you can if you want. I was just curious if it was like a preference or related to other parts of your infra

PeterbaldOP

2023-10-28T23:56:48.000Z

its just a preference

so can i still use auth js

should i?