CarlosSeijas
← Volver a los blogs

¿Cuándo utilizar Next.js y no React?

•Código

Compartir

X (Twitter)LinkedIn
Next.jsReactDesarrolloJavaScriptFrameworkSSRSPA
¿Cuándo utilizar Next.js y no React?

La eterna pregunta: ¿Next.js o React puro?

Te voy a contar algo: esta es probablemente una de las preguntas que más me hacen otros developers. Y es que la elección entre Next.js y React puede realmente hacer que tu proyecto sea un éxito o se convierta en una pesadilla de mantenimiento.

Aunque Next.js está construido sobre React (no son enemigos, ojo), cada uno tiene sus momentos de brillar. En mi experiencia después de trabajar con ambos en proyectos reales, te voy a compartir cuándo usar cada uno.

Primero lo básico: ¿qué es cada cosa?

React: la biblioteca que cambió todo

React es esa biblioteca de JavaScript que nos salvó de jQuery (aunque algunos aún la extrañen). Facebook la creó para construir interfaces interactivas y se enfoca en:

Pero ojo, React por sí solo no incluye herramientas para:

Next.js: React con superpoderes

Next.js es como React, pero con un asistente personal que se encarga de todo lo aburrido. Desarrollado por Vercel, incluye:

Cuándo Next.js es tu mejor amigo

1. Cuando el SEO no es opcional

Next.js brilla cuando Google necesita entender tu sitio. Si tu cliente dice "quiero aparecer primero en Google", ya sabes qué usar:

// Next.js - SSR automático para SEO
export async function getServerSideProps() {
  const data = await fetch('https://api.example.com/products');
  const products = await data.json();

  return {
    props: { products }
  };
}

export default function ProductsPage({ products }) {
  return (
    <div>
      <h1>Nuestros Productos</h1>
      {products.map(product => (
        <ProductCard key={product.id} product={product} />
      ))}
    </div>
  );
}

Por qué funciona tan bien para SEO:

2. E-commerce y sitios corporativos

En mi experiencia, estos proyectos son perfectos para Next.js:

// pages/products/[id].js
export async function getStaticPaths() {
  const products = await getProductsFromDatabase();
  const paths = products.map(product => ({
    params: { id: product.id.toString() }
  }));

  return { paths, fallback: 'blocking' };
}

export async function getStaticProps({ params }) {
  const product = await getProductById(params.id);
  
  return {
    props: { product },
    revalidate: 60 // ISR - Regenerar cada minuto
  };
}

3. Aplicaciones con contenido que cambia

Perfecto para:

4. Cuando el rendimiento no es negociable

Next.js viene con optimizaciones automáticas que te ahorran semanas de trabajo:

// Optimización automática de imágenes
import Image from 'next/image';

export default function ProductImage({ src, alt }) {
  return (
    <Image
      src={src}
      alt={alt}
      width={500}
      height={300}
      priority // Para imágenes above-the-fold
      placeholder="blur" // Lazy loading con blur
    />
  );
}

Lo importante es que estas optimizaciones están incluidas. No tienes que configurar nada.

5. Equipos que necesitan entregar ayer

Las ventajas de productividad son reales:

Cuándo React puro es la mejor opción

1. Single Page Applications complejas

React puro domina cuando construyes SPAs que viven principalmente en el cliente:

// React + React Router para SPAs complejas
import { BrowserRouter, Routes, Route } from 'react-router-dom';
import { Provider } from 'react-redux';

function App() {
  return (
    <Provider store={store}>
      <BrowserRouter>
        <Routes>
          <Route path="/dashboard/*" element={<Dashboard />} />
          <Route path="/analytics/*" element={<Analytics />} />
          <Route path="/settings/*" element={<Settings />} />
        </Routes>
      </BrowserRouter>
    </Provider>
  );
}

Los casos donde React puro gana:

2. Aplicaciones con lógica súper compleja

Cuando React brilla de verdad:

// Editor complejo que no necesita SSR
function CodeEditor() {
  const [code, setCode] = useState('');
  const [theme, setTheme] = useState('dark');
  const [language, setLanguage] = useState('javascript');

  // Lógica compleja del editor
  const handleCodeChange = useCallback((newCode) => {
    setCode(newCode);
    // Lógica de autocompletado, sintaxis, etc.
  }, []);

  return (
    <div className="editor-container">
      <Monaco
        value={code}
        language={language}
        theme={theme}
        onChange={handleCodeChange}
      />
    </div>
  );
}

3. Aplicaciones móviles híbridas

React + React Native Web es genial para:

4. Proyectos con requirements muy específicos

En estos casos especiales:

// webpack.config.js personalizado para casos especiales
module.exports = {
  entry: './src/index.js',
  output: {
    library: 'MyComponent',
    libraryTarget: 'umd',
  },
  externals: {
    react: 'React',
    'react-dom': 'ReactDOM',
  },
  // Configuración muy específica
};

5. Desarrollo de bibliotecas y componentes

React puro es perfect para:

La batalla: Next.js vs React

Rendimiento en números reales

AspectoNext.jsReact
First Paint⚡ Excelente (SSR)🐌 Más lento (CSR)
SEO✅ Óptimo❌ Problemático
Bundle Size📦 Optimizado automáticamente🔧 Requiere configuración
Caching🚀 Avanzado (ISR)🔧 Manual

Experiencia de desarrollo (esto es lo que realmente importa día a día)

AspectoNext.jsReact
Setup⚡ Inmediato🔧 Configuración requerida
Routing📁 Basado en archivos📚 React Router manual
API Routes✅ Incluido❌ Backend separado
Deployment🚀 Optimizado (Vercel)🔧 Configuración manual

La guía definitiva de casos de uso

Proyectos que gritan "¡USA NEXT.JS!"

✅ E-commerce (cada producto necesita SEO)
✅ Blogs y CMS (contenido indexable)
✅ Landing pages de marketing (conversiones importantes)
✅ Sitios web corporativos (el jefe quiere Google ranking)
✅ Aplicaciones con SEO crítico
✅ Proyectos con deadlines súper ajustados

Proyectos perfectos para React puro

✅ Dashboards administrativos (usuarios internos)
✅ Aplicaciones SaaS complejas (funcionalidad > SEO)
✅ Editores y herramientas creativas (lógica compleja)
✅ Aplicaciones en tiempo real (como Slack)
✅ Micro-frontends (arquitectura específica)
✅ Bibliotecas de componentes (para otros developers)

Lo que realmente pasa en proyectos reales

Arquitectura: full-stack vs desacoplada

Next.js - Todo en uno:

// API Route integrada
// pages/api/products.js
export default async function handler(req, res) {
  if (req.method === 'GET') {
    const products = await getProductsFromDatabase();
    res.status(200).json(products);
  }
}

// Componente que consume la API
// pages/products.js
export async function getServerSideProps() {
  const response = await fetch(`${process.env.NEXT_PUBLIC_API_URL}/api/products`);
  const products = await response.json();
  
  return { props: { products } };
}

React - Separado y especializado:

// Separación clara: Frontend y Backend
// Frontend: React app
// Backend: Express, FastAPI, etc.

// services/productService.js
export const getProducts = async () => {
  const response = await fetch('https://api.myapp.com/products');
  return response.json();
};

// components/ProductList.jsx
export function ProductList() {
  const [products, setProducts] = useState([]);
  
  useEffect(() => {
    getProducts().then(setProducts);
  }, []);
  
  return <div>{/* Render products */}</div>;
}

Las estrategias de renderizado (esto es clave)

Next.js te da opciones múltiples:

// SSR - Server Side Rendering
export async function getServerSideProps() {
  return { props: { data: await fetchData() } };
}

// SSG - Static Site Generation
export async function getStaticProps() {
  return { 
    props: { data: await fetchData() },
    revalidate: 3600 // ISR
  };
}

// CSR - Client Side Rendering (como React)
export default function Page() {
  const { data } = useSWR('/api/data', fetcher);
  return <div>{data ? <Content data={data} /> : <Loading />}</div>;
}

Migrar entre uno y otro (porque pasa)

De React a Next.js (el camino más común)

Los pasos que realmente funcionan:

  1. Evaluar rutas existentes (¿cuántas páginas tienes?)
  2. Convertir React Router a páginas de Next.js
  3. Implementar SSR/SSG gradualmente (no todo de una vez)
  4. Optimizar imágenes con next/image
  5. Configurar API Routes solo si los necesitas

De Next.js a React (menos común, pero pasa)

Ten en cuenta:

  1. Configurar bundler (Webpack es un dolor, Vite es mejor)
  2. Implementar routing con React Router
  3. Configurar backend separado (más trabajo)
  4. Optimizaciones manuales de rendimiento (mucho trabajo)

Los stacks que realmente uso

Mi stack favorito con Next.js

Next.js + TypeScript
└── Styling: Tailwind CSS (rápido y limpio)
└── Estado: Zustand (más simple que Redux)
└── Datos: SWR (caching inteligente)
└── Database: Prisma + PostgreSQL
└── Deploy: Vercel (obvio)
└── Auth: NextAuth.js (integrado perfecto)

Stack sólido con React puro

React + Vite + TypeScript
└── Routing: React Router (sin alternativa)
└── Styling: Emotion (CSS-in-JS que funciona)
└── Estado: Redux Toolkit (para apps complejas)
└── HTTP: React Query (manejo de estado server)
└── Build: Vite (súper rápido)
└── Deploy: Netlify (fácil y confiable)
└── Auth: Auth0 (si no quieres complicarte)

Mi guía para tomar la decisión

¿Deberías usar Next.js? Pregúntate:

☑️ ¿Google necesita indexar mi contenido?
☑️ ¿Quiero el proyecto listo para ayer?
☑️ ¿Es un e-commerce o sitio corporativo?
☑️ ¿Prefiero convenciones sobre configuración?
☑️ ¿Voy a usar Vercel para deploy?
☑️ ¿Necesito APIs simples integradas?

¿React puro es mejor? Considera esto:

☑️ ¿Es una SPA con lógica súper compleja?
☑️ ¿El SEO me da igual?
☑️ ¿Necesito control total sobre el bundling?
☑️ ¿Estoy desarrollando una biblioteca?
☑️ ¿Tengo requirements de configuración muy específicos?
☑️ ¿Ya tengo un backend establecido y robusto?

Lo que viene en el futuro

Next.js está evolucionando rápido

Next.js 14+ trae cosas geniales:

React también se está poniendo interesante

Nuevas características que cambian el juego:

Mi reflexión después de años en esto

Mira, después de construir proyectos de todo tipo, mi consejo es súper práctico:

Usa Next.js si:

Usa React puro si:

La verdad incómoda

No existe la "respuesta correcta universal". Lo que funciona para una startup de 3 personas no funciona para una empresa de 500 developers. Lo que es perfecto para un blog personal es horrible para una app como Gmail.

En mi experiencia, para 80% de proyectos web, Next.js es la mejor opción. Es más rápido de desarrollar, más fácil de mantener, y viene con optimizaciones que tardas meses en implementar manualmente.

Para el 20% restante - aplicaciones súper complejas, herramientas internas, bibliotecas - React puro te da la flexibilidad que necesitas.

¿Mi consejo práctico? Si tienes dudas, empieza con Next.js. Siempre puedes migrar después, pero es más probable que no necesites hacerlo.

¿Cuál vas a elegir para tu próximo proyecto? La decisión es tuya, pero espero que esta guía te ayude a tomarla con más confianza.

Comentarios

Posts relacionados