enkilabs

Posts

Dec 5, 2025

Rails vs Next.js: Cuándo usar cada uno en un proyecto real

Elegir entre Rails y Next.js es una de las decisiones más importantes al iniciar un proyecto web. Ambos frameworks son excelentes, pero brillan en contextos diferentes. Aquí te cuento cuándo usar cada uno basándome en experiencia real.

Ruby on Rails: El framework todo en uno

Rails es perfecto cuando necesitas:

1. Desarrollo rápido de MVPs

Rails fue diseñado para maximizar la productividad del desarrollador. Con convenciones sobre configuración, puedes tener una aplicación con autenticación, base de datos y CRUD en minutos.

# Un scaffold completo en una línea
rails generate scaffold Article title:string content:text published:boolean

# Autenticación con Devise
rails generate devise:install
rails generate devise User

2. Aplicaciones con lógica de negocio compleja

Si tu aplicación tiene mucha lógica en el backend (facturación, inventarios, workflows complejos), Rails brilla:

class Order < ApplicationRecord
  belongs_to :user
  has_many :order_items
  has_many :products, through: :order_items
  
  validates :status, inclusion: { in: %w[pending paid shipped delivered] }
  
  def calculate_total
    order_items.sum { |item| item.quantity * item.price }
  end
  
  def process_payment!
    transaction do
      update!(status: 'paid', paid_at: Time.current)
      OrderMailer.confirmation(self).deliver_later
      InventoryService.reserve_items(self)
    end
  end
end

3. Equipos pequeños o solopreneurs

Con Rails, una sola persona puede manejar frontend y backend. No necesitas coordinar entre múltiples repos o equipos especializados.

4. Aplicaciones tradicionales

Si tu app es principalmente server-rendered con formularios, dashboards administrativos, o no requiere interactividad extrema en el frontend, Rails con Hotwire/Turbo es increíblemente eficiente.

<!-- Actualización en tiempo real sin JavaScript -->
<%= turbo_frame_tag "notifications" do %>
  <%= render @notifications %>
<% end %>

<!-- Formulario con validación instantánea -->
<%= turbo_frame_tag "new_comment" do %>
  <%= form_with model: @comment do |f| %>
    <%= f.text_area :body %>
    <%= f.submit %>
  <% end %>
<% end %>

Next.js: El rey de las experiencias modernas

Next.js es tu mejor opción cuando:

1. Necesitas SEO perfecto

Con App Router y Server Components, Next.js ofrece SSR y SSG de forma nativa:

// app/blog/[slug]/page.tsx
export async function generateMetadata({ params }: Props): Promise<Metadata> {
  const post = await getPost(params.slug);
  
  return {
    title: post.title,
    description: post.excerpt,
    openGraph: {
      title: post.title,
      description: post.excerpt,
      images: [post.coverImage],
    },
  };
}

export default async function BlogPost({ params }: Props) {
  const post = await getPost(params.slug);
  
  return (
    <article>
      <h1>{post.title}</h1>
      <div dangerouslySetInnerHTML= />
    </article>
  );
}

2. Interfaces altamente interactivas

Si tu app es más parecida a una aplicación de escritorio (editores, dashboards en tiempo real, herramientas colaborativas):

'use client';

import { useState, useEffect } from 'react';
import { useRealtimeData } from '@/hooks/useRealtimeData';

export default function LiveDashboard() {
  const { metrics, isConnected } = useRealtimeData();
  const [selectedPeriod, setSelectedPeriod] = useState('day');
  
  return (
    <div className="grid grid-cols-3 gap-4">
      {metrics.map(metric => (
        <MetricCard
          key={metric.id}
          data={metric}
          period={selectedPeriod}
          isLive={isConnected}
        />
      ))}
    </div>
  );
}

3. Tienes equipo especializado

Next.js permite que frontend y backend sean completamente independientes. Tu equipo de frontend puede trabajar con la mejor DX mientras el backend se construye en paralelo:

// app/api/products/route.ts
export async function GET(request: Request) {
  const products = await prisma.product.findMany({
    include: { category: true }
  });
  
  return Response.json(products);
}

// O conecta con cualquier backend
const products = await fetch('https://api.example.com/products');

4. Aplicaciones globales con edge computing

Con Vercel Edge Functions, puedes servir tu app desde el edge más cercano al usuario:

export const runtime = 'edge';

export async function GET(request: Request) {
  const { searchParams } = new URL(request.url);
  const country = request.headers.get('x-vercel-ip-country');
  
  // Personalización por región sin latencia
  const content = await getLocalizedContent(country);
  
  return Response.json(content);
}

La decisión práctica

Usa Rails si:

Estás solo o con un equipo pequeño
Necesitas entregar rápido
La lógica de negocio está en el servidor
No necesitas una SPA compleja
Presupuesto limitado (hosting más barato)

Usa Next.js si:

SEO es crítico para tu negocio
Necesitas una experiencia de usuario súper fluida
Tienes equipo frontend especializado
Vas a construir una aplicación mobile después (reutilizas el API)
Necesitas performance global con CDN/Edge

El híbrido: Lo mejor de ambos mundos

En mi experiencia, la combinación más poderosa es:

Rails como API + Next.js como frontend

// next.config.js
module.exports = {
  async rewrites() {
    return [
      {
        source: '/api/:path*',
        destination: 'https://rails-api.example.com/:path*'
      }
    ];
  }
};

Esto te da:

La robustez de Rails para lógica compleja
La flexibilidad de Next.js para UX moderna
Separación de responsabilidades
Escalabilidad independiente

Mi recomendación

Para startups y proyectos nuevos:

Empieza con Rails si no estás seguro. Es más rápido llegar al mercado.
Añade Next.js cuando realmente necesites una experiencia frontend superior.
No sobre-ingenieres: muchos proyectos funcionan perfectamente con solo Rails o solo Next.js.

La mejor tecnología es la que te permite enviar valor a tus usuarios más rápido. Ambos frameworks son excelentes; la clave está en entender tu contexto específico.

¿Qué framework prefieres usar? ¿Has tenido experiencias combinando ambos?

Dec 2, 2025

Cómo Desplegar Rails Gratis Usando Coolify

Desplegar aplicaciones Rails puede ser costoso si utilizas plataformas tradicionales. En este artículo, te mostraré cómo puedes desplegar tu aplicación Rails completamente gratis utilizando Coolify, una alternativa open-source a Heroku y Netlify.

🎯 ¿Qué es Coolify?

Coolify es una plataforma de hosting self-hosted que te permite desplegar aplicaciones, bases de datos y servicios de forma sencilla. Es como tener tu propio Heroku pero con control total sobre tu infraestructura.

Características principales:

Open Source: Código 100% abierto y gratuito
Self-hosted: Despliega en tu propio servidor
Multi-aplicación: Gestiona múltiples proyectos desde una interfaz
Docker-based: Utiliza contenedores para un despliegue consistente
CI/CD integrado: Despliegue automático desde Git
SSL automático: Certificados HTTPS gratuitos con Let’s Encrypt

🛠️ Requisitos Previos

Antes de comenzar, necesitarás:

Un servidor VPS (puedes obtener uno gratis en Oracle Cloud, Google Cloud o AWS Free Tier)
Una aplicación Rails lista para desplegar
Un dominio (opcional, pero recomendado)
Conocimientos básicos de terminal y Git

📋 Paso 1: Configurar tu Servidor

Primero, necesitas un servidor con al menos:

2 GB de RAM
1 CPU
20 GB de almacenamiento
Ubuntu 22.04 LTS (recomendado)

Proveedores con niveles gratuitos:

Oracle Cloud: 2 instancias ARM gratuitas permanentemente
Google Cloud: $300 en créditos por 90 días
AWS: 12 meses de t2.micro gratuito

🚀 Paso 2: Instalar Coolify

Conéctate a tu servidor via SSH y ejecuta:

curl -fsSL https://cdn.coollabs.io/coolify/install.sh | bash

Este script instalará automáticamente:

Docker y Docker Compose
Coolify y sus dependencias
Configuración inicial del sistema

El proceso toma aproximadamente 5-10 minutos.

🔐 Paso 3: Acceder a Coolify

Una vez instalado, accede a Coolify en:

http://tu-ip-servidor:8000

Crea tu cuenta de administrador siguiendo el asistente de configuración inicial.

📦 Paso 4: Preparar tu Aplicación Rails

Asegúrate de que tu aplicación Rails tenga:

Dockerfile

Si no tienes un Dockerfile, crea uno en la raíz de tu proyecto:

FROM ruby:3.2

RUN apt-get update -qq && apt-get install -y nodejs postgresql-client

WORKDIR /app

COPY Gemfile Gemfile.lock ./
RUN bundle install

COPY . .

# Precompilar assets
RUN RAILS_ENV=production bundle exec rake assets:precompile

EXPOSE 3000

CMD ["rails", "server", "-b", "0.0.0.0"]

Variables de Entorno

Prepara un archivo .env.example con las variables necesarias:

DATABASE_URL=postgresql://user:password@postgres:5432/myapp_production
RAILS_MASTER_KEY=tu_master_key_aqui
SECRET_KEY_BASE=tu_secret_key_base_aqui

🎨 Paso 5: Configurar el Proyecto en Coolify

Crear un nuevo proyecto: En el dashboard de Coolify, haz clic en “New Project”
Agregar un recurso: Selecciona “New Resource” → “Application”
Conectar tu repositorio Git:
- Autoriza tu cuenta de GitHub/GitLab
- Selecciona el repositorio de tu aplicación Rails
Configurar el build:
- Build Pack: Docker
- Dockerfile Path: ./Dockerfile
- Branch: main (o la que uses)
Agregar Base de Datos:
- En el mismo proyecto, añade un nuevo recurso “Database”
- Selecciona PostgreSQL
- Coolify creará automáticamente la base de datos
Variables de Entorno:
- Ve a la sección “Environment Variables”
- Añade todas las variables necesarias
- La DATABASE_URL la proporciona automáticamente Coolify

🌐 Paso 6: Configurar Dominio y SSL

Agregar dominio:
- En la configuración de tu aplicación
- Sección “Domains”
- Añade tu dominio (ej: tuapp.com)
Configurar DNS:
- En tu proveedor de dominios
- Crea un registro A apuntando a la IP de tu servidor
- Espera a que se propague (puede tomar hasta 24 horas)
Activar SSL:
- Coolify generará automáticamente un certificado SSL de Let’s Encrypt
- No necesitas configuración adicional

⚡ Paso 7: Desplegar

Haz clic en el botón “Deploy”
Coolify:
- Clonará tu repositorio
- Construirá la imagen Docker
- Ejecutará las migraciones (si las configuras)
- Iniciará la aplicación
Monitorea el progreso en los logs en tiempo real

🔄 Despliegue Continuo

Configura webhooks para despliegue automático:

Ve a “Webhooks” en tu aplicación
Copia la URL del webhook
En GitHub/GitLab:
- Settings → Webhooks
- Pega la URL
- Selecciona eventos “Push”

Ahora cada vez que hagas push a tu rama principal, Coolify desplegará automáticamente.

🎯 Comandos Útiles

Ejecutar migraciones:

docker exec -it container_name rails db:migrate

Acceder a la consola Rails:

docker exec -it container_name rails console

Ver logs:

Los logs están disponibles directamente en la interfaz de Coolify en tiempo real.

💡 Tips y Mejores Prácticas

Backups: Configura backups automáticos de tu base de datos en Coolify
Monitoreo: Usa la sección de métricas para monitorear CPU, RAM y disco
Health Checks: Configura health checks para reiniciar automáticamente si falla
Recursos: Ajusta los límites de CPU y memoria según tus necesidades
Staging: Crea un entorno de staging en el mismo servidor para probar cambios

🆚 Coolify vs Otras Alternativas

Característica	Coolify	Heroku	Railway	Render
Costo	Gratis (solo servidor)	$7+/mes	$5+/mes	$7+/mes
Control total	✅	❌	❌	❌
Open Source	✅	❌	❌	❌
Self-hosted	✅	❌	❌	❌
Auto-SSL	✅	✅	✅	✅

🎉 Conclusión

Coolify es una excelente opción para desplegar aplicaciones Rails sin costo, manteniendo control total sobre tu infraestructura. Si bien requiere un poco más de configuración inicial que las soluciones PaaS comerciales, el ahorro en costos y la flexibilidad lo hacen una opción muy atractiva.

Con un servidor gratuito de Oracle Cloud y Coolify, puedes tener múltiples aplicaciones Rails en producción sin gastar un centavo.

📚 Recursos Adicionales

Nov 27, 2025
Desarrollando Jombo: Aplicando Vibe Coding al Desarrollo de Software
Actualmente estoy trabajando en Jombo, un proyecto emocionante que estoy desarrollando aplicando los principios del vibe coding. Esta metodología de desarrollo se centra en mantener el flujo, la creatividad y la intuición como motores principales del proceso de construcción de software.

🤔 ¿Qué es Vibe Coding?

Vibe coding es una aproximación al desarrollo de software que prioriza:
- Flujo continuo: Mantener el momentum y evitar interrupciones innecesarias
- Desarrollo intuitivo: Confiar en la experiencia y la intuición del desarrollador
- Iteración rápida: Construir, probar y ajustar de forma ágil
- Creatividad sin límites: Explorar soluciones innovadoras sin restricciones excesivas
🚀 El Proyecto Jombo

Jombo es una aplicación web moderna construida con tecnologías de vanguardia que combina un frontend dinámico con una API robusta.

Arquitectura del Proyecto

El proyecto está dividido en dos repositorios principales:

Frontend con Next.js

El frontend de Jombo está desarrollado con Next.js, aprovechando sus capacidades de renderizado del lado del servidor, rutas optimizadas y una experiencia de desarrollo excepcional. Ofrece una interfaz de usuario fluida, moderna e intuitiva.

🔗 Repositorio Frontend: github.com/aiw3ndil/jombo-frontend

API Backend con Ruby on Rails

La API está construida con Ruby on Rails, un framework robusto y elegante que facilita el desarrollo rápido sin sacrificar calidad. Proporciona la lógica de negocio, gestión de datos y está diseñada para ser escalable y eficiente.

🔗 Repositorio API: github.com/aiw3ndil/jombo-api

💡 Aplicando Vibe Coding en Jombo

Durante el desarrollo de Jombo, he aplicado los principios del vibe coding de las siguientes formas:
- Desarrollo en sprints creativos: Sesiones intensivas de programación donde el código fluye naturalmente
- Prototipado rápido: Implementación de features experimentales para validar ideas rápidamente
- Refactoring orgánico: Mejora continua del código siguiendo la intuición y las mejores prácticas
- Experimentación constante: Probar nuevas librerías y patrones sin miedo al cambio
🔮 Próximos Pasos

El proyecto continúa evolucionando, y seguiré aplicando vibe coding mientras añado nuevas funcionalidades y optimizo la experiencia del usuario. Mantente atento para más actualizaciones sobre el progreso de Jombo.
Nov 26, 2025
Como crear una pagina multiidioma con react
🌍 Cómo Crear una Página Web Multiidioma con Next.js: Guía Completa

Next.js es el mejor framework para crear aplicaciones web modernas en React, y una de sus mayores ventajas es la facilidad para implementar internacionalización (i18n). Ya sea para una web personal, un SaaS o una tienda online, ofrecer varios idiomas te permite llegar a más usuarios y mejorar la experiencia de navegación.

En esta guía aprenderás a crear una web multiidioma con Next.js usando next-intl, la librería más recomendada en 2025 por su sencillez, SSR amigable y compatibilidad total con App Router.

🧠 ¿Por qué usar Next.js para una web multilingüe?

Next.js facilita todo lo relacionado con idiomas:

Rutas automáticas por idioma (/en, /es, /fi)

Excelente SEO gracias a hreflang

Carga de traducciones optimizada

Componentes renderizados en servidor con el idioma correcto

Tipado fuerte si usas TypeScript

🛠️ Librería recomendada: next-intl

Existen varias opciones, pero hoy la mejor para el App Router es next-intl, que:

✔️ Funciona con Server Components ✔️ Tiene soporte para layouts multiidioma ✔️ No genera bundle innecesario ✔️ Es sencilla de mantener

🚀 Implementación paso a paso en Next.js
1. Instalar dependencias npm install next-intl
2. Crear la estructura de traducciones
En un proyecto con App Router:
```
/app
  /[locale]
    page.js
    layout.js
/locales
  /en
    common.json
  /es
    common.json
```
Ejemplo de locales/es/common.json:
```
{
  "welcome": "Bienvenido a mi web en Next.js",
  "description": "Esta página es multiidioma usando next-intl."
}
```
Ejemplo de locales/en/common.json:
```
{
  "welcome": "Welcome to my Next.js website",
  "description": "This page is multilingual using next-intl."
}
```
1. Configurar el middleware para detectar idioma
Crea middleware.js:
```
import createMiddleware from 'next-intl/middleware';

export default createMiddleware({
  locales: ['en', 'es'],
  defaultLocale: 'en'
});

export const config = {
  matcher: ['/((?!_next|.*\\..*).*)']
};
```
Esto hace que / redirija a /en por defecto o al idioma del navegador.
1. Crear el layout multiidioma
```
Archivo: app/[locale]/layout.js
import { NextIntlClientProvider } from 'next-intl';
import { notFound } from 'next/navigation';
import React from 'react';
 
export default async function RootLayout({ children, params }) {
  let messages;
  try {
    messages = (await import(`../../locales/${params.locale}/common.json`)).default;
  } catch (error) {
    notFound();
  }
 
  return (
    <html lang={params.locale}>
      <body>
        <NextIntlClientProvider messages={messages}>
          {children}
        </NextIntlClientProvider>
      </body>
    </html>
  );
}
```
1. Usar traducciones en un componente
Archivo: app/[locale]/page.js
```
import { useTranslations } from 'next-intl';

export default function Home() {
  const t = useTranslations();

  return (
    <div>
      <h1>{t("welcome")}</h1>
      <p>{t("description")}</p>
    </div>
  );
}
```
1. Crear un selector de idioma
Archivo: app/components/lang-switcher.js
```
"use client";

import Link from "next/link";
import { usePathname } from "next/navigation";

export default function LangSwitcher() {
  const pathname = usePathname();

  const createPath = (locale) => {
    const parts = pathname.split('/');
    parts[1] = locale;
    return parts.join('/');
  };

  return (
    <div style=>
      <Link href={createPath("es")}>🇪🇸 Español</Link>
      <Link href={createPath("en")}>🇬🇧 English</Link>
    </div>
  );
}
```
📦 Resultado final

Al terminar tendrás:

✔️ Una web Next.js con rutas multiidioma (/es, /en) ✔️ Detección automática del idioma del usuario ✔️ Traducciones cargadas en servidor ✔️ SEO completamente optimizado ✔️ Un selector de idioma funcional

🧩 Conclusión

Next.js hace que crear una web multiidioma sea rápido y elegante. Con next-intl consigues:

Código limpio

SSR correcto

Rutas perfectas para SEO

Rendimiento óptimo

Es la solución ideal para proyectos serios en producción.