Al integrar todas las partes de tu aplicación Next.js, a menudo emergen errores que no eran visibles durante el desarrollo por componentes separados.

El truco

// ANTES
import fetch from 'node-fetch'; // Uso incorrecto en el cliente

export async function getServerSideProps() {
  const res = await fetch('https://api.example.com/data');
  const data = await res.json();
  return { props: { data } };
}

// DESPUÉS
export async function getServerSideProps() {
  const res = await fetch('https://api.example.com/data');
  const data = await res.json();
  return { props: { data } };
}

// Código cliente en un componente React
import useSWR from 'swr';

function MyComponent() {
  const { data, error } = useSWR('/api/getData'); // Correcto para el cliente
  if (error) return <div>Error</div>;
  if (!data) return <div>Loading...</div>;
  return <div>{data.someValue}</div>;
}

A menudo se pasa por alto que ciertos paquetes, como node-fetch, no deben usarse en el lado del cliente. Next.js maneja tanto el servidor como el cliente, y es crucial distinguir entre ambos para evitar errores y garantizar el correcto rendimiento. Usar fetch dentro de getServerSideProps es adecuado, pero en el cliente, usar un hook como useSWR es más eficiente y evita problemas relacionados con el entorno de ejecución.

La clave está en entender bien las diferencias entre el entorno del servidor y del cliente en Next.js, y aprovechar cada uno al máximo.