Construir um painel admin com Next.js é um dos projetos mais completos para um desenvolvedor full stack: autenticação real, controle de acesso por grupos e CRUD com Server Actions.
Criar um painel admin com Next.js é um dos projetos mais completos que você pode desenvolver para crescer como desenvolvedor full stack. Em um único sistema, você lida com autenticação segura, operações de banco de dados, controle de acesso por perfis, upload de arquivos e muito mais. E o melhor: com Next.js App Router, Prisma e NextAuth.js, você consegue entregar algo profissional sem depender de frameworks pesados como Django Admin ou Laravel Nova.
Ferramentas como Strapi, Directus e Payload CMS são ótimas, mas quando você precisa de uma solução totalmente integrada ao seu domínio de negócio, construir o painel do zero tem vantagens claras: controle total sobre UX, regras de negócio e performance; mesma stack do frontend público sem overhead; e um projeto de portfólio que cobre praticamente todos os pilares do desenvolvimento full stack moderno.
A estrutura de rotas de um painel admin com App Router separa o layout administrativo em um diretório dedicado com seu próprio layout.tsx, que contém sidebar e header. Dentro dele ficam as rotas de cada entidade: usuários, grupos, permissões, conteúdo, skills, experiência. Cada entidade tipicamente tem uma página de listagem, uma de criação e uma de edição com parâmetro dinâmico.
A autenticação com NextAuth.js usa o CredentialsProvider para login com e-mail e senha. O fluxo valida as credenciais contra o banco via Prisma, compara a senha com bcrypt, carrega as permissões do grupo do usuário e as injeta no token JWT via callback. Na sessão, as permissões ficam disponíveis em session.user.permissions como um array de strings, acessível em qualquer Server Component ou Client Component.
O Middleware do Next.js é a peça que protege todas as rotas administrativas. Com withAuth do NextAuth, qualquer rota sob /admin/* exige um token válido. Para proteção granular por recurso, o middleware verifica se o token contém a permission específica da rota acessada — por exemplo users:manage para o CRUD de usuários — e redireciona para o dashboard com um aviso de acesso negado caso contrário.
O sistema de permissões usa três entidades relacionadas: User, Group e Permission. Um usuário pertence a um grupo, um grupo tem várias permissões, e uma permissão tem um codename único como skills:manage ou content:edit. Essa estrutura permite criar grupos como Administrador, Editor e Visualizador com conjuntos diferentes de permissões, atribuindo o grupo certo a cada usuário conforme seu papel no sistema.
Com Next.js 14+, Server Actions simplificam drasticamente as operações de escrita. Em vez de criar uma API Route separada, você declara uma função async com a diretiva "use server", checa a sessão do usuário, executa a operação no Prisma e chama revalidatePath para atualizar o cache da listagem. A função é chamada diretamente de um formulário HTML via action ou de um botão de exclusão, sem precisar de fetch no cliente.
As páginas de listagem são Server Components que buscam os dados diretamente no banco via Prisma durante o render no servidor. Isso elimina estados de loading, evita waterfalls de requests e simplifica o código em comparação com Client Components que fazem fetch. Para buscas e filtros em tempo real, o padrão é usar query params na URL, que o Server Component lê via searchParams e repassa para a query do Prisma.
Construir um painel admin com Next.js do zero é um dos exercícios mais completos e valiosos que um desenvolvedor full stack pode fazer. Você domina autenticação real, controle de acesso granular, operações de banco tipadas com Prisma e a arquitetura moderna do App Router — tudo em um único projeto. E o resultado é algo que você pode usar em clientes reais, cobrar por manutenção e evoluir conforme a necessidade cresce.