What is the best way to create user and admin dashbaord switch for Nextjs app?

Question

Need to know a proper way to set up different flows after login(or maybe even some different aproach), just no idea what is the most used by proper devs way, so far I have just created a login form and if user validates token and is admin I set up an auth context where admin is true and token is valid and just show different layout for admin user or if it was just a regular user other layout, but I'm not sure whether this is what actual ppl who create administrative dashboard for let's say eshops or blogs would do. What are the best practices for this sort of switch? Mostly looking for advice in the react/nextjs realm, but also feel free to add abstract advice since I'm just lacking experience in general design of this kind. Below is a simplified version of my _app file(root file), Project is done in Nextjs. Would love any advice, since I'm having troubles with creating solid architecture for my blog app where average users only can see posts and comment but admins have DASHBOARD and can CRUD even though I already have the components and the apis now I'm stuck at how to separate these in the front end without making some big newbie mistakes and just making a fool out of myself when I deploy to live.

function MyApp(props) {
  const {token, login, logout, userId, admin} = useAuth();

  if(admin === 'true') {
    return (
      <React.Fragment>
      <AuthContext.Provider
            value={{
                isLoggedIn: !!token,
                token: token,
                userId: userId,
                admin: admin,
                login: login,
                logout: logout
              }}
              >
          <AdminNavigation>
              <Component {...pageProps} />
          </AdminNavigation>
      </AuthContext.Provider>    
    </React.Fragment>
  );
} else {
  return (
    <React.Fragment>
      <AuthContext.Provider
            value={{
              isLoggedIn: !!token,
              token: token,
              userId: userId,
              admin: admin,
              login: login,
              logout: logout
            }}
            >
          <MainNavigation />
            <Layout>
              <Component {...pageProps} />
            </Layout>
      </AuthContext.Provider>
    </React.Fragment>
  );
}
}

export default MyApp;

Answer 1

You can keep the parts that are common for both conditions in one return statement. Then you can use ternary operators ?+: to switch between two conditions:

function MyApp(props) {
  const {token, login, logout, userId, admin} = useAuth();

  return (
    <React.Fragment>
      <AuthContext.Provider
            value={{
                isLoggedIn: !!token,
                token: token,
                userId: userId,
                admin: admin,
                login: login,
                logout: logout
              }}
              >

          {admin === 'true' 
          ? ( <AdminNavigation>
                <Component {...pageProps} />
            </AdminNavigation>)


          : (<>
            <MainNavigation />
            <Layout>
              <Component {...pageProps} />
            </Layout>
            </>)}

      </AuthContext.Provider>    
    </React.Fragment>
  )
}

export default MyApp;