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

// 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>
  );
}

// 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
  };
}

// 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
    />
  );
}

// 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>
  );
}

// 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>
  );
}

// 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
};

✅ E-commerce (Shopify)
✅ Blogs y CMS (Contentful, Strapi)
✅ Landing pages de marketing
✅ Sitios web corporativos
✅ Aplicaciones con SEO crítico
✅ Proyectos con deadlines ajustados

✅ Dashboards administrativos
✅ Aplicaciones SaaS complejas
✅ Editores y herramientas creativas
✅ Aplicaciones en tiempo real
✅ Micro-frontends
✅ Bibliotecas de componentes

// 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 } };
}

// 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>;
}

// 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>;
}

Next.js + TypeScript
└── Styling: Tailwind CSS / Styled Components
└── Estado: Zustand / Redux Toolkit
└── Datos: SWR / React Query
└── Database: Prisma + PostgreSQL
└── Deploy: Vercel / Netlify
└── Auth: NextAuth.js

React + Vite + TypeScript
└── Routing: React Router
└── Styling: Emotion / Styled Components
└── Estado: Redux Toolkit / Zustand
└── HTTP: Axios / React Query
└── Build: Vite / Webpack
└── Deploy: Netlify / AWS
└── Auth: Auth0 / Firebase

☑️ ¿El SEO es crítico para el proyecto?
☑️ ¿Necesitas contenido prerenderizado?
☑️ ¿Quieres configuración mínima?
☑️ ¿El equipo busca productividad máxima?
☑️ ¿Planeas usar Vercel para deploy?
☑️ ¿Necesitas API routes simples?

☑️ ¿Es una SPA con lógica compleja?
☑️ ¿No necesitas SEO?
☑️ ¿Tienes requisitos de bundling específicos?
☑️ ¿Desarrollas una biblioteca/componente?
☑️ ¿Necesitas máximo control sobre la configuración?
☑️ ¿Ya tienes un backend establecido?