App Router with same component viewed differently

Answered

Router Renegade posted this in #help-forum

2024-10-04T18:05:45.825Z

So, in Next js App router, how can i display the same page in a different manner for different users? is it possible to achieve this?

or in other words, I want to display the Home component of my app, in a different manner for 3 different types of users [owner, admin and user]

Answered by B33fb0n3

you can do this by checking the specific type of the user and render different components of it:

const userType = "user" // can be owner, admin, user
switch(userType) {
  case "user":
    return <UserDashboard />
  case "owner":
    return <OwnerDashboard />
  case "admin":
    return <AdminDashboard />
}

That would be an easy way to implement different dashboards for different types of user

View full answer

12 Replies

@Router Renegade So, in Next js App router, how can i display the same page in a different manner for different users? is it possible to achieve this? or in other words, I want to display the `Home` component of my app, in a different manner for 3 different types of users [owner, admin and `user`]

B33fb0n3

2024-10-04T18:54:35.300Z

you can do this by checking the specific type of the user and render different components of it:

const userType = "user" // can be owner, admin, user
switch(userType) {
  case "user":
    return <UserDashboard />
  case "owner":
    return <OwnerDashboard />
  case "admin":
    return <AdminDashboard />
}

That would be an easy way to implement different dashboards for different types of user

Answer

@B33fb0n3 you can do this by checking the specific type of the user and render different components of it: tsx const userType = "user" // can be owner, admin, user switch(userType) { case "user": return <UserDashboard /> case "owner": return <OwnerDashboard /> case "admin": return <AdminDashboard /> } That would be an easy way to implement different dashboards for different types of user

Router RenegadeOP

2024-10-04T19:23:20.841Z

Aha, thank you

B33fb0n3

2024-10-04T20:02:26.430Z

happy to help

Barbary Lion

2024-10-04T22:11:24.337Z

@Router Renegade

You might wanna use [parallel routes](https://nextjs.org/docs/app/building-your-application/routing/parallel-routes) for this. Depending on the user type, they can even go to different routes. Here's an example:

export async function Layout({user, owner, admin}: {
    user: React.ReactNode
    owner: React.ReactNode
    admin: React.ReactNode
}) {
  // You would dynamically retrieve this from cookie-based sessions or similar methods
  const userType = await getUserType();

  if (userType === "admin") return admin;
  else if (userType === "owner") return owner;
  else return user;
}