Como criar, listar e gerir Páginas, Componentes, Processos BPMN, Permissões e Bundles de um projeto Next.js no iGRP Studio — campos dos formulários, vistas e ações disponíveis.
O Page Manager é a vista geral de um projeto Next.js no iGRP Studio — abre quando clicas num projeto frontend no workspace. Daqui crias e organizas as Páginas (rotas da aplicação) e os Componentes (blocos reutilizáveis) e abre-os no Page Builder. Dá também acesso aos processos BPMN, às permissões, aos bundles e às configurações do projeto.
O Page Manager organiza-se em cinco separadores:
Skills IGRP
No topo da vista, o Studio sugere instalar a skill igrp-studio-metadata no projeto, para melhorar a geração por agentes de IA. Instalar skill instala-a no projeto (também disponível no separador Bundles); o × esconde a sugestão.
Páginas
O separador Páginas lista as páginas e componentes da aplicação. O contador por baixo do título mostra X pages • Y subpages • Z components e reflete a pesquisa ou o filtro ativos.
Barra de ferramentas
Todos os grupos, um grupo existente (por exemplo (auth)) ou sem grupo. Só aparece quando o projeto tem route groups.
Pesquisar páginas… por nome, path, descrição, tipo ou grupo. A pesquisa inclui sub-páginas e componentes filhos.
Última modificação (por defeito), data de criação ou nome. Alterar um filho atualiza a data do pai.
Cartões (grelha) ou tabela (path, tipo e sub-páginas numa linha).
Criar uma página
Clica em Adicionar → Criar Nova Página.
| Campo | |
|---|---|
| Título da Página Obrigatório | Nome legível, mostrado no Studio. O Nome é preenchido a partir dele |
| Nome da Página Obrigatório | Nome técnico do componente React — sem espaços nem hífenes (por exemplo pedidos) |
| Grupo (opcional) | Route group do Next.js: (nome)/path, que não aparece no URL. Sem grupo, um grupo existente ou Novo grupo… |
| Path Obrigatório | Rota da página, sem a barra inicial: pedidos, pedidos/[id], docs/[[...slug]] |
| Forçar Dinâmico | Desativa o pre-render estático da página |
| Usar Client | Junta a diretiva "use client" ao ficheiro gerado. Ativo por defeito; pode ser mudado depois no Page Builder |
Quando o path tem segmentos dinâmicos ([id]), o Studio gera os argumentos da página automaticamente.
Path sem barra inicial
/pedidos é recusado com Invalid Next.js path format, apesar de a mensagem dar exemplos com barra. Escreve pedidos.
Ações nas páginas
Cada página tem um menu ⋮ no cartão (ou na linha da tabela):
| Ação | O que faz |
|---|---|
| Editar | Edita os metadados da página (título, nome, path, flags) |
| Duplicar | Duplica a página — pede novo título, nome e path |
| Abrir editor | Abre a página no Page Builder |
| Criar Sub-página | Cria uma rota filha, já com o path da página como prefixo |
| Criar componente da página | Cria um componente associado a esta página |
| Mover… | Muda a página de pai, ou põe-a no nível de topo |
| Eliminar | Remove a página e o ficheiro de rota gerado (pede confirmação) |
Criar Sub-página, Criar componente da página e Mover… só existem em páginas. Os componentes globais têm Editar, Duplicar, Abrir editor e Eliminar.
Duplicar
O diálogo de duplicação pré-preenche os campos com o sufixo Copy — título Pedidos Copy, nome pedidosCopy, path pedidos-copy. A cópia herda toda a estrutura da original.
Mover
Mover… lista as páginas de topo como destino, mais a opção de passar para o nível de topo. Os destinos que criariam ciclos (a própria página ou descendentes) não aparecem. Só muda os metadados — não renomeia ficheiros.
Componentes
Criar um componente
Clica em Adicionar → Criar Novo Componente (ou Criar componente da página no menu de uma página).
| Campo | |
|---|---|
| Título do Componente Obrigatório | Nome legível. O Nome é gerado a partir dele |
| Nome do Componente Obrigatório | Identificador técnico — sem espaços nem hífenes |
| Páginas | Associa o componente a uma página: fica na pasta components dessa rota. Sem página, o componente é global |
| Select Icon | Ícone do componente na paleta |
| Define Arguments | Props do componente — nome, tipo, opcional, lista ou função (com os seus próprios parâmetros) |
| Generated Component Signature | Pré-visualização, em tempo real, da assinatura TypeScript gerada |
BPMN
Lista os processos de workflow do projeto (ficheiros .bpmn), para criar, abrir e gerir as definições diretamente no Studio. Precisa da stack Process no workspace — ver Integrações.
Permissões
Catálogo de permissões do projeto, usado nas regras de permissão das páginas e componentes — ver Permissões no frontend. O número ao lado do separador é o total de entradas.
Bundles
Catálogo de bundles prontos a instalar no projeto — Discover mostra o catálogo, Installed o que já está no projeto. Os bundles agrupam-se em Platform, Páginas, Formulários, Componentes, Processos, Migrações e Skills, por exemplo:
| Bundle | Tipo | O que instala |
|---|---|---|
| Form CRUD (Template) | Formulário | Scaffold de formulário CRUD (ID, nome, descrição, ativo + guardar/cancelar), parametrizável |
| igrp-studio-metadata | Skill | A skill que ensina agentes de IA a escrever os ficheiros .igrpstudio/ do projeto |
| Process Management UI | Platform | As páginas de Process Management (catch-all do processo, view, resumo, form partilhado) |
| Template Migrator | Migração | As migrações pendentes do template Next.js (equivale a igrp migrate apply --yes --force) |
Os bundles marcados como incompatíveis não servem para a versão do projeto.
Manter o projeto atualizado com o template
O projeto gerado segue o template Next.js do iGRP. Quando sai uma versão nova do framework, as alterações chegam como migrações: aplica-as com igrp migrate no terminal — ver Migrações do template — ou com o bundle Template Migrator acima.
Configurações
Configurações do projeto gerado: nome, descrição, versão do engine e opções de build. É o mesmo painel que abre pela barra lateral do Page Builder.
Última atualização: