1. Mapbox API の例

Mapbox は、地図、ナビゲーション サービス、その他の位置ベースのアプリケーションの作成に使用できる包括的なツールと正確な位置データを提供します。 Mapbox を使用すると、カスタム マップの表示、地理位置情報の統合などを行うことができます。
リンク

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. NASA API の例

NASA API は、画像、ビデオ、惑星や星などに関する情報を含む、宇宙に関連する豊富なデータへのアクセスを提供します。教育ツールを構築している場合でも、単に魅力的な宇宙データを表示したい場合でも、NASA の API は優れたリソースです。
リンク

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. お気に入りの引用 API の例

この API は、アプリケーションに簡単に統合できる洞察力に富んだ引用のコレクションを提供します。ユーザーにインスピレーションを与え、やる気を起こさせるアプリを作成するのに最適です。
リンク

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. Edamam API の例

Edamam は、詳細な健康分析とともに、食品とレシピの包括的なデータベースへのアクセスを提供します。この API は、ダイエット トラッカー、レシピ アプリ、栄養ベースのアプリケーションの作成に最適です。
リンク

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. フェイクストアAPIの例

Fake Store API は、e コマース プロジェクトに取り組む開発者にとって素晴らしいツールです。これは、ストアに製品、価格、カテゴリを設定するために使用できる疑似実データを提供します。
リンク

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. ポケモン API の例

Pokémon API (PokeAPI) はポケモンファンにとって必需品です。ステータス、タイプ、能力など、すべてのポケモンに関する包括的なデータが提供されているため、ポケモン関連のアプリやゲームの構築に最適です。
リンク

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. IGDB API の例

インターネット ゲーム データベース (IGDB) API は、何千ものビデオ ゲームに関するデータを提供し、ビデオ ゲーム指向の Web サイトやアプリケーションを作成できるようにします。ゲーム、プラットフォーム、ジャンルなどに関する情報を取得できます。
リンク

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;

結論

これらの各例は、それぞれの API を React、Next に統合する方法を示しています。これらの例は、より詳細な情報の表示、ユーザー インタラクションの処理、より良い UX のための出力のスタイル設定など、アプリケーションのニーズに合わせて簡単に拡張できます。

これらの例は、さまざまな無料 API からデータを取得して表示することがいかに簡単であるかを示しています。