1. Exemplo de API Mapbox

Mapbox oferece ferramentas abrangentes e dados de localização precisos que você pode usar para criar mapas, serviços de navegação e outros aplicativos baseados em localização. Com o Mapbox, você pode exibir mapas personalizados, integrar geolocalização e muito mais.
Link

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. Exemplo de API da NASA

A API da NASA fornece acesso a uma grande variedade de dados relacionados ao espaço, incluindo imagens, vídeos e informações sobre planetas, estrelas e muito mais. Esteja você construindo uma ferramenta educacional ou apenas queira exibir dados espaciais fascinantes, a API da NASA é um excelente recurso.
Link

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. Exemplo de API de cotações favoritas

Esta API oferece uma coleção de citações esclarecedoras que você pode integrar facilmente ao seu aplicativo. É perfeito para criar aplicativos que inspiram e motivam os usuários.
Link

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. Exemplo de API Edamam

Edamam fornece acesso a um banco de dados abrangente de alimentos e receitas, juntamente com análises detalhadas de saúde. Esta API é ideal para criar rastreadores de dieta, aplicativos de receitas e aplicativos baseados em nutrição.
Link

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. Exemplo de API de loja falsa

A API Fake Store é uma ferramenta fantástica para desenvolvedores que trabalham em projetos de comércio eletrônico. Ele fornece dados pseudo-reais que você pode usar para preencher sua loja com produtos, preços e categorias.
Link

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. Exemplo de API Pokémon

A API Pokémon (PokeAPI) é obrigatória para qualquer fã de Pokémon. Ele oferece dados abrangentes sobre todos os Pokémon, incluindo estatísticas, tipos e habilidades, tornando-o perfeito para criar aplicativos e jogos relacionados a Pokémon.
Link

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. Exemplo de API IGDB

A API do Internet Games Database (IGDB) fornece dados sobre milhares de videogames, permitindo que você crie sites e aplicativos voltados para videogames. Você pode buscar informações sobre jogos, plataformas, gêneros e muito mais.
Link

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;

Conclusão

Cada um desses exemplos mostra como integrar as respectivas APIs em um React, Next. Você pode estender facilmente esses exemplos para atender às necessidades do seu aplicativo, seja exibindo informações mais detalhadas, lidando com interações do usuário ou estilizando a saída para uma melhor experiência do usuário.

Esses exemplos demonstram como é simples buscar e exibir dados de várias APIs gratuitas.