Cómo construí una web real para un negocio familiar con Next.js

Los negocios familiares en España viven de algo que la web a veces olvida: la confianza. La gente compra porque conoce, porque le han recomendado, porque el padre le compraba al abuelo. Eso es una ventaja brutal — y al mismo tiempo, un techo. Sin canal digital propio, esa confianza no escala.

Cuando me senté con el cliente de Perdicestavi, esa fue la primera conversación. No sobre tecnología. Sobre por qué su mejor activo no estaba apareciendo en Google.

El problema, en una frase

El negocio existía, pero no existía digitalmente. Quien lo buscaba caía en directorios genéricos o competencia con SEO mejor trabajado. Cada cliente potencial perdido era un porcentaje de la facturación que se iba por la grieta del canal que no tenían.

Importante: el problema no era 'no tener web'. Era 'no aparecer cuando alguien me busca'. Esa distinción cambia todo lo que viene después, porque te ahorra construir un e-commerce cuando lo que hace falta es información clara y un teléfono visible.

La solución mínima que resuelve el problema entero

El brief honesto: una web que transmita profesionalidad en los primeros 5 segundos, funcione perfecta en móvil, dé información clave sin fricción y permita contactar en un toque.

Stack elegido:

• Next.js 15 (App Router) — performance por defecto, time-to-production corto, ecosistema serio.
• TailwindCSS — diseño rápido con consistencia, sin CSS inflado.
• Vercel — deploy gratis, CDN global, previews por commit para iterar con el cliente.

Justificación práctica: este stack me deja entregar en pocos días una web rápida que aprueba Core Web Vitals casi por defecto. Ese aprueba sin tocar es importante para SEO local: Google premia performance y mobile-friendly, y un negocio familiar no tiene presupuesto para un equipo de optimización.

Decisiones que importaron

Mobile-first estricto. No la versión que se ve OK en móvil. La versión que se prueba primero en un iPhone con datos móviles, en un sitio mal iluminado, con una sola mano. El 80% de las búsquedas locales son móviles. Si no funciona ahí, no funciona.

Una sola página. La tentación junior es dividir todo en rutas: home, about, productos, contacto, blog. Cero. Cualquier sub-sección tiene que justificar tráfico o conversión. Una landing potente convierte más que cinco páginas tibias.

Copy directo. Cero clichés tipo 'pasión y calidad'. El cliente sabía mejor que yo cómo hablar de su producto, mi trabajo era estructurarlo. Pregunté cómo describía el negocio cuando un cliente nuevo le llamaba por teléfono, y eso fue el copy.

SEO local desde el primer día. Title con la palabra clave principal y la ubicación. Meta description con propuesta de valor concreta. Schema.org LocalBusiness con dirección y teléfono. Sitemap, robots, alt tags en cada imagen.

El proceso real

Día 1: conversación de negocio. Sin abrir el editor.

Día 2: estructura de contenido en un documento, validada con el cliente.

Día 3-4: maquetación en Next.js con datos reales (no lorem ipsum, eso esconde problemas).

Día 5: deploy en Vercel con dominio temporal y revisión con el cliente desde su propio móvil.

Día 6-7: ajustes de copy, imágenes optimizadas, SEO técnico y conexión del dominio final.

Lo que no hice: planificar tres semanas, dibujar wireframes en Figma, debatir tipografías. Para un proyecto de este alcance, eso es teatro.

Aprendizajes honestos

El error fácil habría sido sobre-diseñar. Animaciones, parallax, secciones largas explicando 'nuestra historia'. Habría quedado bonito y habría convertido peor.

La web cumple su función ahora. Lo siguiente no es añadir más, es medir. Cuántas visitas mensuales. Qué buscan. Cuántas terminan en una llamada. Esos datos van a decir qué tocar a continuación, no mi intuición.

Para quien tenga un negocio familiar

Si estás leyendo esto y tienes un negocio que va de boca en boca, una web bien hecha no te va a transformar la facturación de la noche a la mañana — pero te va a quitar el techo del canal. Quien te busca y no te encuentra, deja de existir como cliente. Esa es la pérdida silenciosa que arregla una web hecha con criterio.

Si quieres ver el resultado, Perdicestavi.com está en producción. Si construimos algo parecido para tu negocio, hablemos.