How do I show each role only the screens and actions it is allowed to use?

Render menus, screens, and buttons from the current user's permissions, driven by one config map instead of scattered if-chains.

Derive the visible UI from the current user

What a person sees follows from their role. An admin gets user management, a reviewer gets the moderation queue, a regular user gets neither. Read the role once, then let each nav item, screen, and button ask "is this allowed?" before it renders.

In a Next.js App Router app with roles [admin], [reviewer], [user], how do I read the current user's role in a Server Component and render only the nav items and screens that role is allowed to see?

Keep permissions in one map, not in if-chains

Scattered if (role === "admin") checks drift apart fast. Keep the rules in one config map (which role can do which action) and have components read from it. Change a permission, and you edit one place.

Show me how to define a permissions map in TypeScript that says which of my roles ([admin], [reviewer], [user]) can perform actions like [edit-post] or [delete-user], and a small helper like can(role, action) my components can call.

Wrap the check in one reusable component

Once the rule lives in a map, wrap it in a single component so you never retype the check. A <Can action="delete-user">...</Can> renders its children only when the current user is allowed. CASL ships this exact component if you would rather not build your own.

Show me a reusable React gate <Can action="[delete-user]">...</Can> that reads the current user's role and renders its children only when the action is allowed. Then show the CASL Can equivalent so I can decide whether to roll my own.

Derive the visible UI from the user's role through one permissions map, not from if-chains sprinkled across components.

Additional Resources

Explore these carefully curated resources to deepen your understanding and practice the concepts covered in this lesson.

Next.js Server and Client Components

Documentation

How Server Components decide what to render before any markup reaches the browser.

https://nextjs.org/docs/app/getting-started/server-and-client-components

CASL React

Documentation

A reusable Can component that renders its children only when the current user is allowed the action, so the check lives in one place.

https://casl.js.org/v7/en/guide/intro

PreviousNext