Projeto pessoal · Protótipo funcionalEscanear rotasConfigurar interaçõesGerar componente
Seu projeto.Em modo demonstração.
Uma ferramenta própria para preparar demos de projetos Next.js.
Põe qualquer projeto Next.js em modo demonstração.
- Next.js 14
- React 18
- TypeScript
Projeto pessoal · Protótipo funcionalEscanear rotasMapeia as rotas doprojeto Next.js.Configurar interaçõesDefine o que fica livre,
sem clique ou sem acesso.Gerar componenteEscreve o arquivo e liga
no layout do projeto.
Seu projeto.Em modo demonstração.
Uma ferramenta própria para preparar demos de projetos Next.js.
- Next.js 14
- React 18
- TypeScript
Põe qualquer projeto Next.js em modo demonstração.
- Next.js 14
- React 18
- TypeScript
Cada rota. Uma experiência definida.
Configure o que o cliente pode visualizar e como interage na demonstração.
LiberadoNavegação e interações disponíveis.Bloquear cliquesPágina visível, com interações interceptadas.Bloquear acessoBloqueio visual ao entrar na rota.Controle de interface para demonstração.Mostrar um sistema ainda em construção tem um risco: o cliente clica em "Finalizar compra" ou entra no painel de administração e encontra algo pela metade. A ferramenta lê as páginas do projeto e deixa decidir, página por página, o que fica livre, o que se vê mas não se clica e o que nem abre. Mude as chaves e veja o código sair.
- Home (/)
/ - produtos
/produtos - [id]
/produtos/[id] - carrinho
/carrinho - checkout
/checkout - admin
/admin - pedidos
/admin/pedidosHerda a regra da pasta de cima - produtos
/admin/produtosHerda a regra da pasta de cima
2 liberada(s) · 0 com cliques bloqueados · 0 sem acesso
O que vai para o código
// 🟡 a página aparece, os cliques abrem o aviso
const BLOCKED_ROUTES: string[] = [
"/carrinho",
"/checkout"
]
// 🔴 a página nem abre
const IMMEDIATE_BLOCK_ROUTES: string[] = [
"/admin"
]Projeto de exemplo. No app, a árvore vem da pasta app do projeto escolhido; as páginas com parâmetro (como [id]) também aparecem.
O que o cliente vê
Navegar à vontade. Até onde você quiser.
Este é o site de exemplo com o modo demonstração ligado. A vitrine está livre, o carrinho aparece mas o botão não funciona, e o painel nem abre. Em vez de erro, o cliente vê um aviso com o seu contato. Clique nas páginas e nos botões; mude as regras ao lado.
Início
Coleção de outono com frete grátis acima de R$ 150.
Regras das páginas deste exemplo:
- Início
/ - Carrinho
/carrinho - Painel
/admin
O contato do aviso
Site de exemplo. O texto do aviso é o mesmo que a ferramenta instala no projeto; o contato e o nome da empresa são configuráveis.
Da configuração visual ao código da demo.
Scanner de rotas, geração de componente e integração ao layout do projeto.
Uma ferramenta própria para agilizara preparação de demonstrações.Backup do
layoutAtivar
demonstraçãoDesativar
modo demoRepresentação conceitual da integraçãoProtótipo funcional
Escolhidas as regras, ninguém precisa abrir o código. A ferramenta pergunta se deve guardar uma cópia, escreve o componente e põe duas linhas no layout do projeto. Para voltar ao normal, um botão troca uma palavra. Ative e desative para ver o que muda nos arquivos.
Arquivos do projeto
_Backup/components/demo-mode.tsximport "./globals.css" export default function RootLayout({ children }) { return ( <html lang="pt-BR"> <body> {children} </body> </html> )}Terminal
- Aguardando…
Simulação dos passos que o app faz no projeto escolhido. A cópia guarda o layout, o componente e um info.txt numa pasta com data e hora.
Os limites
Uma vitrine, não um cadeado.
O modo demonstração serve para apresentar, não para proteger. Ele esconde e trava o que a pessoa vê na tela, mas o site continua inteiro no navegador. Por isso vale dizer, com a mesma clareza, onde ele ajuda e onde não deve ser usado.
Onde ajuda
- Evita o clique no lugar errado
Botões de páginas marcadas abrem o aviso em vez de fazer a ação.
- Esconde áreas inacabadas
Páginas marcadas mostram o aviso logo na entrada.
- Transforma o bloqueio em contato
O aviso traz o e-mail, o WhatsApp e o nome da empresa.
- Mexe pouco no projeto
Um arquivo novo e duas linhas no layout; uma cópia antes, se quiser.
Onde não usar
- Não é proteção de dados
O bloqueio é visual, no navegador; quem entende de código consegue contornar.
- Não serve para o Pages Router
Ele lê a pasta app; projetos na estrutura antiga do Next não aparecem completos.
- Não trata React sem Next
O projeto é aceito, mas sem a pasta app não há rotas para configurar.
- Não foi testado a fundo
É um protótipo pessoal: funciona no uso do dia a dia, sem bateria de testes.
Limites conferidos no código da ferramenta (app/api).
As tecnologias
Do que é feito, peça por peça
Um painel que roda no computador de quem desenvolve, na porta 4000. A tela é React; por trás, cinco rotas de servidor do Next.js leem as pastas e escrevem os arquivos do projeto escolhido. Escolha uma peça para ver o que ela faz aqui e em que arquivo está.
10tecnologias, em 3 camadas
Tela
Servidor
Recursos
As telas
O painel como ele é.
As telas reais da ferramenta, no tema escuro com roxo. Toque ou passe o mouse para endireitar uma foto e clique para ver grande.
Telas reais do app; a prévia mostra outro projeto do mesmo autor.
Ferramentas para criação e desenvolvimentoDev Launcher