Autenticación Next.js: Soluciona errores ocultos como un profesional

Si estás experimentando problemas de autenticación en Next.js al conectar componentes, es probable que estés gestionando el estado de usuario de forma incorrecta.

El truco

Antes (mal):

// pages/_app.js
export default function MyApp({ Component, pageProps }) {
  const user = fetchUserFromApi(); // Llamada API directa

  return <Component {...pageProps} user={user} />;
}

Después (bien):

// hooks/useUser.js
import { useState, useEffect } from 'react';

export default function useUser() {
  const [user, setUser] = useState(null);

  useEffect(() => {
    async function fetchUser() {
      const response = await fetch('/api/user');
      const data = await response.json();
      setUser(data.user);
    }
    fetchUser();
  }, []);

  return user;
}

// pages/_app.js
import useUser from '../hooks/useUser';

export default function MyApp({ Component, pageProps }) {
  const user = useUser(); // Hook para gestión del estado

  return <Component {...pageProps} user={user} />;
}

El error común es intentar realizar una llamada API directamente dentro del componente que maneja el estado. Esto causa problemas de sincronización y puede bloquear la representación de los componentes hijos. Al mover la lógica de autenticación a un custom hook, como useUser, encapsulas la gestión del estado de manera que es más fácil de manejar, más reactiva y menos propensa a errores.

Recuerda, mover la lógica de autenticación a un hook no solo simplifica tu código, sino que también mejora la estructura y mantenibilidad de tu aplicación.