Vorluno

Tecnologías · Next.js

Next.js: el framework que usamos para construir web premium.

Construimos landing pages, dashboards y e-commerce con Next.js 16, React 19 y Tailwind v4. Performance Core Web Vitals 90+, SEO técnico nativo y animaciones de nivel agencia premiada. Esta misma página está hecha así.

Por qué Next.js con Vorluno

No es solo "React con SSR". Es la stack completa para web moderna.

App Router con React Server Components: menos JavaScript en el cliente, hidratación selectiva y streaming SSR por defecto.

SEO técnico nativo: metadata API, sitemap dinámico, robots.txt programático, Open Graph generado en runtime y JSON-LD estructurado.

Core Web Vitals optimizados: LCP < 2.5s, INP < 200ms y CLS < 0.1 medidos en CrUX, no solo en Lighthouse local.

View Transitions API integrada en Next.js 16: transiciones de página tipo app nativa sin bundle extra ni hacks de JavaScript.

Deploy donde tenga sentido: Vercel para edge global, CapRover o Coolify para self-hosting, Azure Static Web Apps para enterprise.

Stack moderno completo: shadcn/ui sobre Radix, Tailwind v4 con tokens en CSS, GSAP + Lenis para animación y Framer Motion para micro-interacciones.

Qué construimos en Next.js

Seis tipos de proyectos. Mismo stack, distinto enfoque.

Landing pages premium con animación

Hero con TextSplitReveal, scroll-driven storytelling con GSAP ScrollTrigger, glassmorphism y parallax. Calidad Awwwards sin sacrificar el LCP.

Dashboards SaaS y aplicaciones internas

Server Actions para mutaciones, Tanstack Query para client state, charts con Recharts o Visx, autenticación con NextAuth o Clerk y multi-tenancy.

E-commerce headless

Storefront con Shopify Hydrogen, Medusa o BigCommerce. Catálogo con ISR, checkout optimizado, integración con Stripe y analítica con Vercel o Plausible.

Sitios corporativos con CMS

Contenido editable por marketing en Sanity, Payload, Strapi o Contentful. Preview mode, draft mode y rebuild automático en cada publicación.

Blogs y documentación con MDX

MDX con frontmatter tipado, tabla de contenidos generada, syntax highlighting con Shiki, RSS feed automático y open-graph images con next/og.

Integraciones con APIs propias y de terceros

BFF en Route Handlers, conexión con backends en .NET, Node, Python o Go, GraphQL con codegen tipado y webhooks con verificación de firma.

Cómo trabajamos con Next.js

5 etapas. De Figma a deploy en producción.

01

Discovery y diseño en Figma

Entendemos audiencia, conversión esperada y restricciones de marca. Diseñamos primero en Figma con tokens reales (colores, espaciado, tipografía) que después se traducen 1:1 a Tailwind.

02

Setup de Next.js y arquitectura

Next.js 16 con App Router, TypeScript estricto, Tailwind v4, ESLint y Prettier. Estructura de carpetas pensada para crecer: app/, components/, lib/, content/. Tokens de diseño en CSS @theme.

03

Implementación de componentes y páginas

Componentes accesibles con Radix o shadcn/ui, páginas con Server Components por defecto y "use client" solo donde hace falta. Animaciones con GSAP donde aportan, Framer Motion para hovers y modales.

04

Optimización Lighthouse y Core Web Vitals

next/image con sizes correctos, fuentes con next/font y display swap, code splitting por ruta, prefetch inteligente y bundle analysis. Objetivo: 90+ en las cuatro categorías de Lighthouse.

05

Deploy con CI/CD y observabilidad

GitHub Actions o Vercel Git Integration con preview deployments por PR. Sentry para errores, Vercel Analytics o Plausible para métricas, y alertas en Slack cuando algo se rompe.

Preguntas frecuentes

Lo que probablemente quieres preguntar.

¿Por qué Next.js y no React puro o Remix?+

React puro (Vite + React Router) es excelente para dashboards internos donde SEO no importa. Remix tiene una filosofía similar a Next.js pero con menos adopción y ecosistema más pequeño. Next.js gana cuando necesitas SSR/SSG, SEO técnico, deploy serverless en edge, View Transitions y un ecosistema masivo (más de 4M de descargas semanales). Para proyectos public-facing es nuestra recomendación por defecto.

¿Performance vs WordPress: cuál carga más rápido?+

En la mayoría de casos, Next.js. WordPress típico tira 100+ requests, jQuery, plugins acumulados y CSS sin tree-shaking. Un sitio Next.js con SSG entrega HTML pre-renderizado, imágenes optimizadas en WebP/AVIF y JavaScript mínimo. La diferencia se siente en LCP (3-4s vs 1.2s) y en mantenimiento (sin actualizaciones de plugins que rompen el sitio cada mes).

¿Cuánto cuesta un sitio Next.js vs uno en WordPress o Webflow?+

A igualdad de complejidad, costo similar al primer pago. La diferencia está en el TCO a 2 años: WordPress requiere mantenimiento mensual de plugins y hosting especializado, Webflow cobra suscripción mensual creciente con el tráfico, Next.js puede correr en Vercel free tier o un VPS de USD 6/mes. Y cuando quieres agregar una funcionalidad custom, en Next.js es código tuyo, no un plugin de terceros que puede desaparecer.

¿Funciona con backends en .NET, Node, Python o cualquier API existente?+

Sí. Next.js es solo el frontend (con un BFF opcional). Consume cualquier API REST, GraphQL o gRPC. Lo más común en nuestros proyectos: Next.js como frontend + .NET 9 o Node.js como backend, comunicándose vía REST con tipos generados desde OpenAPI. También integramos con Supabase, Firebase, AWS Amplify o cualquier headless CMS.

¿Qué tan bueno es el SEO en sitios SPA modernos?+

Excelente, si están hechos bien. Next.js renderiza HTML completo en el servidor (SSR/SSG), lo que Googlebot indexa sin necesidad de JavaScript. Implementamos metadata por página, sitemap.xml dinámico, robots.txt programático, JSON-LD estructurado y Open Graph. Hemos llevado sitios a primera página de Google en consultas competitivas en 4-6 meses con la combinación correcta de SEO técnico y contenido.

¿Cómo se mantiene el sitio después del lanzamiento?+

Tres opciones: 1) Te entregamos el repo y tu equipo lo mantiene (incluye documentación y handoff de 1 semana). 2) Mantenimiento mensual con nosotros: actualizaciones, monitoreo, hotfixes y un pool de horas para cambios menores. 3) Soporte on-demand: pagas por hora cuando necesitas algo. Sin contratos largos, sin lock-in.

Empezar

Tu próximo sitio o producto, con la calidad de las grandes agencias.

Cuéntanos qué necesitas. Te respondemos con un alcance preliminar, referencias de proyectos similares y un rango de inversión en 48 horas.