Proyecto personal · Prototipo funcionalEscanear rutasConfigurar interaccionesGenerar componente
Tu proyecto.En modo demostración.
Una herramienta propia para preparar demos de proyectos Next.js.
Pone cualquier proyecto Next.js en modo demostración.
- Next.js 14
- React 18
- TypeScript
Proyecto personal · Prototipo funcionalEscanear rutasMapea las rutas delproyecto Next.js.Configurar interaccionesDefine qué queda libre,
sin clic o sin acceso.Generar componenteEscribe el archivo y lo conecta
al layout del proyecto.
Tu proyecto.En modo demostración.
Una herramienta propia para preparar demos de proyectos Next.js.
- Next.js 14
- React 18
- TypeScript
Pone cualquier proyecto Next.js en modo demostración.
- Next.js 14
- React 18
- TypeScript
Cada ruta. Una experiencia definida.
Configura qué puede ver el cliente y cómo interactúa en la demostración.
LiberadaNavegación e interacciones disponibles.Bloquear clicsPágina visible, con interacciones interceptadas.Bloquear accesoBloqueo visual al entrar en la ruta.Control de interfaz para demostraciones.Mostrar un sistema todavía en construcción tiene un riesgo: el cliente hace clic en "Finalizar compra" o entra al panel de administración y encuentra algo a medias. La herramienta lee las páginas del proyecto y deja decidir, página por página, qué queda libre, qué se ve pero no se cliquea y qué ni se abre. Cambia las llaves y mira salir el código.
- Home (/)
/ - produtos
/produtos - [id]
/produtos/[id] - carrinho
/carrinho - checkout
/checkout - admin
/admin - pedidos
/admin/pedidosHereda la regla de la carpeta de arriba - produtos
/admin/produtosHereda la regla de la carpeta de arriba
2 liberada(s) · 0 con clics bloqueados · 0 sin acceso
Lo que va al 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"
]Proyecto de ejemplo. En la app, el árbol viene de la carpeta app del proyecto elegido; las páginas con parámetro (como [id]) también aparecen.
Lo que ve el cliente
Navegar a gusto. Hasta donde quieras.
Este es el sitio de ejemplo con el modo demostración activado. La vidriera está libre, el carrito aparece pero el botón no funciona y el panel ni se abre. En lugar de un error, el cliente ve un aviso con tu contacto. Haz clic en las páginas y en los botones; cambia las reglas al lado.
Inicio
Colección de otoño con envío gratis desde R$ 150.
Reglas de las páginas de este ejemplo:
- Inicio
/ - Carrito
/carrinho - Panel
/admin
El contacto del aviso
Sitio de ejemplo. El aviso es el que la herramienta instala en el proyecto (traducido aquí); el contacto y el nombre de la empresa son configurables.
De la configuración visual al código de la demo.
Escáner de rutas, generación de componente e integración al layout del proyecto.
Una herramienta propia para agilizarla preparación de demostraciones.Copia del
layoutActivar
demostraciónDesactivar
modo demoRepresentación conceptual de la integraciónPrototipo funcional
Elegidas las reglas, nadie necesita abrir el código. La herramienta pregunta si debe guardar una copia, escribe el componente y agrega dos líneas al layout del proyecto. Para volver a la normalidad, un botón cambia una palabra. Activa y desactiva para ver qué cambia en los archivos.
Archivos del proyecto
_Backup/components/demo-mode.tsximport "./globals.css" export default function RootLayout({ children }) { return ( <html lang="pt-BR"> <body> {children} </body> </html> )}Terminal
- Esperando…
Simulación de los pasos que la app hace en el proyecto elegido. La copia guarda el layout, el componente y un info.txt en una carpeta con fecha y hora.
Los límites
Una vidriera, no un candado.
El modo demostración sirve para presentar, no para proteger. Esconde y traba lo que la persona ve en pantalla, pero el sitio sigue entero en el navegador. Por eso conviene decir, con la misma claridad, dónde ayuda y dónde no debe usarse.
Dónde ayuda
- Evita el clic en el lugar equivocado
Los botones de las páginas marcadas abren el aviso en vez de hacer la acción.
- Esconde áreas sin terminar
Las páginas marcadas muestran el aviso apenas se entra.
- Convierte el bloqueo en contacto
El aviso trae el correo, el WhatsApp y el nombre de la empresa.
- Toca poco el proyecto
Un archivo nuevo y dos líneas en el layout; una copia antes, si quieres.
Dónde no usarlo
- No es protección de datos
El bloqueo es visual, en el navegador; quien sabe de código puede saltarlo.
- No sirve para el Pages Router
Lee la carpeta app; los proyectos con la estructura antigua de Next no aparecen completos.
- No trata React sin Next
El proyecto se acepta, pero sin la carpeta app no hay rutas para configurar.
- No fue probado a fondo
Es un prototipo personal: funciona en el uso diario, sin batería de pruebas.
Límites verificados en el código de la herramienta (app/api).
Las tecnologías
De qué está hecho, pieza por pieza
Un panel que corre en la computadora de quien desarrolla, en el puerto 4000. La pantalla es React; detrás, cinco rutas de servidor de Next.js leen las carpetas y escriben los archivos del proyecto elegido. Elige una pieza para ver qué hace aquí y en qué archivo está.
10tecnologías, en 3 capas
Pantalla
Servidor
Recursos
Las pantallas
El panel tal como es.
Las pantallas reales de la herramienta, en el tema oscuro con violeta. Toca o pasa el mouse para enderezar una foto y haz clic para verla grande.
Pantallas reales de la app; la vista previa muestra otro proyecto del mismo autor.
Herramientas de creación y desarrolloDev Launcher