(/basic-rbac) add middleware, reorg and refactor copy

[victoriaxyz]

Important

🔎 Previews:

• https://clerk.com/docs/pr/1560/guides/basic-rbac

Explanation:

This PR:

• fixes clarity and flow
• reorganize sections
• rename and remove some headings
• breaks copy into steps
• add middleware.ts section

[github-actions]

Hey, here’s your docs preview: https://clerk.com/docs/pr/1560

[royanger]

This guide should probably get a further update, roughly as follows:

1. Change Create and protect an admin dashboard to something akin to Create and protect an admin dashboard via page.tsx``
2. Add a section like Create and protect an admin dashboard via Middleware
3. Be clear the developer only needs to pick one option for a route.
4. Explain using the checkRole() function in Middleware to protect the entire route. Untested code:

import {
  clerkMiddleware,
  createRouteMatcher
} from '@clerk/nextjs/server';
import { checkRole } from "@/utils/roles";

const isAdminRoute = createRouteMatcher([
  '/admin(.*)',
]);

export default clerkMiddleware((auth, req) => {
  if (isAdminRoute(req) && !checkRole("admin")) auth().protect();
});

export const config = {
  matcher: ['/((?!.*\\..*|_next).*)', '/', '/(api|trpc)(.*)'],
};

Aside from that suggestion, I dropped some thoughts and suggestion throughout the PR.