How to implement role-based routing in Next.js 14 with App Router?

[arverse-u]

Summary

I’m building an app using the App Router in Next.js 14 and I need to restrict access to certain routes based on user roles (admin, editor, viewer).

What’s the best way to implement role-based route protection in the new App Router? Should I use middleware, server components, or both?

Additional information

No response

Example

No response

[AjayKumbham]

You can implement role-based routing in Next.js 14 (App Router) like this:

🔐 1. Middleware:
Use middleware.ts to read cookies or tokens and redirect unauthorized users.

import { NextResponse } from 'next/server';
import type { NextRequest } from 'next/server';

export function middleware(request: NextRequest) {
  const role = request.cookies.get('role')?.value;

  if (!role || role !== 'admin') {
    return NextResponse.redirect(new URL('/unauthorized', request.url));
  }

  return NextResponse.next();
}