1. Ejemplo de API de Mapbox

Mapbox ofrece herramientas integrales y datos de ubicación precisos que puede utilizar para crear mapas, servicios de navegación y otras aplicaciones basadas en la ubicación. Con Mapbox, puedes mostrar mapas personalizados, integrar geolocalización y mucho más.
Enlace

import React, { useEffect } from 'react';

const Mapbox = () => {
    useEffect(() => {
        // Set your Mapbox access token here
        const mapboxAccessToken = 'YOUR_MAPBOX_ACCESS_TOKEN';

        // Create a map instance
        const map = new mapboxgl.Map({
            container: 'map', // Container ID in the HTML
            style: 'mapbox://styles/mapbox/streets-v11', // Style URL
            center: [-74.5, 40], // Starting position [lng, lat]
            zoom: 9, // Starting zoom
        });

        mapboxgl.accessToken = mapboxAccessToken;
    }, []);

    return (
        

            
Mapbox Example
            

        
    );
};

export default Mapbox;

2. Ejemplo de API de la NASA

La API de la NASA brinda acceso a una gran cantidad de datos relacionados con el espacio, incluidas imágenes, videos e información sobre planetas, estrellas y más. Ya sea que esté creando una herramienta educativa o simplemente quiera mostrar datos espaciales fascinantes, la API de la NASA es un recurso excelente.
Enlace

import React, { useState, useEffect } from 'react';
import axios from 'axios';

const Nasa = () => {
    const [data, setData] = useState(null);

    useEffect(() => {
        axios.get('https://api.nasa.gov/planetary/apod?api_key=DEMO_KEY')
            .then(response => setData(response.data))
            .catch(error => console.error('Error fetching data from NASA API:', error));
    }, []);

    return (
        

            
NASA Astronomy Picture of the Day
            {data ? (
                

                    
{data.title}
                    
{data.explanation}
                
            ) : (
                
Loading...
            )}
        
    );
};

export default Nasa;

3. Ejemplo de API de cotizaciones favoritas

Esta API ofrece una colección de citas interesantes que puedes integrar fácilmente en tu aplicación. Es perfecto para crear aplicaciones que inspiren y motiven a los usuarios.
Enlace

import React, { useState, useEffect } from 'react';
import axios from 'axios';

const Quotes = () => {
    const [quote, setQuote] = useState('');

    useEffect(() => {
        axios.get('https://favqs.com/api/qotd')
            .then(response => setQuote(response.data.quote.body))
            .catch(error => console.error('Error fetching data from Quotes API:', error));
    }, []);

    return (
        

            
Quote of the Day
            
{quote}
        
    );
};

export default Quotes;

4. Ejemplo de API de Edamam

Edamam proporciona acceso a una base de datos completa de alimentos y recetas, junto con análisis de salud detallados. Esta API es ideal para crear rastreadores de dietas, aplicaciones de recetas y aplicaciones basadas en nutrición.
Enlace

import React, { useState, useEffect } from 'react';
import axios from 'axios';

const Edamam = () => {
    const [recipes, setRecipes] = useState([]);
    const query = "chicken"; // Example search query

    useEffect(() => {
        const appId = 'YOUR_EDAMAM_APP_ID';
        const appKey = 'YOUR_EDAMAM_APP_KEY';

        axios.get(`https://api.edamam.com/search?q=${query}&app_id=${appId}&app_key=${appKey}`)
            .then(response => setRecipes(response.data.hits))
            .catch(error => console.error('Error fetching data from Edamam API:', error));
    }, []);

    return (
        

            
Edamam Recipes for "{query}"
            

                {recipes.map((recipe, index) => (
                    

                        
                        {recipe.recipe.label}
                    
                ))}
            
    );
};

export default Edamam;

5. Ejemplo de API de tienda falsa

La API de Fake Store es una herramienta fantástica para los desarrolladores que trabajan en proyectos de comercio electrónico. Proporciona datos pseudorreales que puedes utilizar para completar tu tienda con productos, precios y categorías.
Enlace

import React, { useState, useEffect } from 'react';
import axios from 'axios';

const FakeStore = () => {
    const [products, setProducts] = useState([]);

    useEffect(() => {
        axios.get('https://fakestoreapi.com/products')
            .then(response => setProducts(response.data))
            .catch(error => console.error('Error fetching data from Fake Store API:', error));
    }, []);

    return (
        

            
Fake Store Products
            

                {products.map(product => (
                    

                        
                        {product.title}
                    
                ))}
            
    );
};

export default FakeStore;

6. Ejemplo de API de Pokémon

La API de Pokémon (PokeAPI) es imprescindible para cualquier fanático de Pokémon. Ofrece datos completos sobre todos los Pokémon, incluidas estadísticas, tipos y habilidades, lo que lo hace perfecto para crear aplicaciones y juegos relacionados con Pokémon.
Enlace

import React, { useState, useEffect } from 'react';
import axios from 'axios';

const Pokemon = () => {
    const [pokemonList, setPokemonList] = useState([]);

    useEffect(() => {
        axios.get('https://pokeapi.co/api/v2/pokemon?limit=10')
            .then(response => setPokemonList(response.data.results))
            .catch(error => console.error('Error fetching data from Pokémon API:', error));
    }, []);

    return (
        

            
Pokémon List
            

                {pokemonList.map((pokemon, index) => (
                    

                        {pokemon.name}
                    
                ))}
            
    );
};

export default Pokemon;

7. Ejemplo de API de IGDB

La API de Internet Games Database (IGDB) proporciona datos sobre miles de videojuegos, lo que le permite crear sitios web y aplicaciones orientados a videojuegos. Puedes obtener información sobre juegos, plataformas, géneros y más.
Enlace

import React, { useState, useEffect } from 'react';
import axios from 'axios';

const IGDB = () => {
    const [games, setGames] = useState([]);

    useEffect(() => {
        const apiKey = 'YOUR_IGDB_API_KEY';

        axios.post('https://api.igdb.com/v4/games/', 
        'fields name, cover.url; sort popularity desc; limit 10;', 
        { headers: { 'Client-ID': 'YOUR_CLIENT_ID', 'Authorization': `Bearer ${apiKey}` } })
            .then(response => setGames(response.data))
            .catch(error => console.error('Error fetching data from IGDB API:', error));
    }, []);

    return (
        

            
Popular Video Games
            

                {games.map(game => (
                    

                        {game.cover ?  : null}
                        {game.name}
                    
                ))}
            
    );
};

export default IGDB;

Conclusión

Cada uno de estos ejemplos muestra cómo integrar las respectivas API en React, Next. Puede ampliar fácilmente estos ejemplos para que se ajusten a las necesidades de su aplicación, ya sea mostrando información más detallada, manejando las interacciones del usuario o diseñando el resultado para una mejor experiencia de usuario.

Estos ejemplos demuestran lo sencillo que es recuperar y mostrar datos de varias API gratuitas.