Cómo consumir APIs en Next.js con Fetch y Axios

Introducción

Consumir APIs es una tarea esencial en el desarrollo de aplicaciones web modernas. En Next.js, puedes integrar datos fácilmente en tus aplicaciones utilizando herramientas como Fetch o Axios. En este artículo, te mostraré cómo hacerlo con ejemplos claros usando la API de prueba JSONPlaceholder.

JSONPlaceholder es una API gratuita que proporciona datos de ejemplo, como publicaciones, comentarios y usuarios, ideal para aprender a manejar peticiones HTTP.

¿Qué aprenderás?

• Cómo consumir APIs en Next.js con Fetch.
• Cómo consumir APIs en Next.js con Axios.
• Cuándo utilizar cada método según tus necesidades.

Consumir una API con Fetch en Next.js

Fetch es una API nativa de JavaScript que permite realizar solicitudes HTTP. Es ligera, no requiere instalación y es ideal para la mayoría de los casos.

Ejemplo con Fetch

"use client";

import { useState, useEffect } from "react";

interface Post {
  id: number;
  title: string;
  body: string;
}

export default function FetchExample() {
  const [posts, setPosts] = useState<Post[]>([]);
  const [loading, setLoading] = useState(true);
  const [error, setError] = useState("");

  useEffect(() => {
    const fetchPosts = async () => {
      try {
        const response = await fetch("https://jsonplaceholder.typicode.com/posts");
        if (!response.ok) {
          throw new Error("Error en la respuesta de la red");
        }
        const data = await response.json();
        setPosts(data.slice(0, 5)); // Obtener solo los primeros 5 posts
      } catch (err) {
        setError("Error al cargar los posts");
      } finally {
        setLoading(false);
      }
    };

    fetchPosts();
  }, []);

  if (loading) return <div>Cargando...</div>;
  if (error) return <div>{error}</div>;

  return (
    <div>
      <h2 className="text-2xl font-bold mb-4">Posts (Fetch)</h2>
      <ul>
        {posts.map((post) => (
          <li key={post.id} className="mb-2">
            <h3 className="font-semibold">{post.title}</h3>
            <p>{post.body}</p>
          </li>
        ))}
      </ul>
    </div>
  );
}

Ventajas de Fetch

1. Integrado en el navegador: No necesitas instalar dependencias adicionales.
2. Ligero y fácil de usar: Ideal para solicitudes simples.
3. Compatible con Next.js: Puedes usarlo tanto en el cliente como en el servidor.

Consumir una API con Axios en Next.js

Axios es una biblioteca externa para realizar solicitudes HTTP. Es conocida por su sintaxis más amigable y características avanzadas, como interceptores y cancelación de solicitudes.

Instalación

Para usar Axios, primero debes instalarlo en tu proyecto:

npm install axios

Ejemplo con Axios

"use client";

import { useState, useEffect } from "react";
import axios from "axios";

interface Post {
  id: number;
  title: string;
  body: string;
}

export default function AxiosExample() {
  const [posts, setPosts] = useState<Post[]>([]);
  const [loading, setLoading] = useState(true);
  const [error, setError] = useState("");

  useEffect(() => {
    const fetchPosts = async () => {
      try {
        const response = await axios.get<Post[]>("https://jsonplaceholder.typicode.com/posts");
        setPosts(response.data.slice(0, 5)); // Obtener solo los primeros 5 posts
      } catch (err) {
        setError("Error al cargar los posts");
      } finally {
        setLoading(false);
      }
    };

    fetchPosts();
  }, []);

  if (loading) return <div>Cargando...</div>;
  if (error) return <div>{error}</div>;

  return (
    <div>
      <h2 className="text-2xl font-bold mb-4">Posts (Axios)</h2>
      <ul>
        {posts.map((post) => (
          <li key={post.id} className="mb-2">
            <h3 className="font-semibold">{post.title}</h3>
            <p>{post.body}</p>
          </li>
        ))}
      </ul>
    </div>
  );
}

Ventajas de Axios

1. Interfaz simplificada: Sintaxis más intuitiva para configurar solicitudes.
2. Funciones avanzadas: Soporte para interceptores, transformación de datos y más.
3. Soporte para JSON automáticamente: Convierte respuestas en JSON sin necesidad de llamarlo manualmente.

Comparación: ¿Fetch o Axios?

¿Cuál usar?

• Usa Fetch si prefieres evitar dependencias externas y necesitas una solución ligera.
• Usa Axios si trabajas con solicitudes complejas o necesitas características avanzadas como interceptores.

Preguntas frecuentes (FAQs)

1. ¿Axios es más rápido que Fetch?

No necesariamente. El rendimiento depende del caso de uso, pero la diferencia es mínima. La principal ventaja de Axios radica en su facilidad de uso y características avanzadas.

2. ¿Cuál es mejor para manejar errores, Fetch o Axios?

Axios tiene una mejor gestión de errores, ya que arroja excepciones automáticamente para códigos de estado fuera del rango 2xx. Con Fetch, necesitas manejar esto manualmente.

Espero que este artículo te haya ayudado a entender cómo consumir APIs en Next.js utilizando Fetch y Axios. Si tienes dudas o comentarios, ¡déjalos abajo!