适用于您下一个项目的 7 个免费 API

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 (
        <div>
            <h2>Mapbox Example</h2>
            <div id="map" style={{ width: '100%', height: '400px' }}></div>
        </div>
    );
};

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 (
        <div>
            <h2>NASA Astronomy Picture of the Day</h2>
            {data ? (
                <div>
                    <h3>{data.title}</h3>
                    <img src={data.url} alt={data.title} style={{ maxWidth: '100%' }} />
                    <p>{data.explanation}</p>
                </div>
            ) : (
                <p>Loading...</p>
            )}
        </div>
    );
};

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 (
        <div>
            <h2>Quote of the Day</h2>
            <blockquote>{quote}</blockquote>
        </div>
    );
};

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 (
        <div>
            <h2>Edamam Recipes for "{query}"</h2>
            <ul>
                {recipes.map((recipe, index) => (
                    <li key={index}>
                        <img src={recipe.recipe.image} alt={recipe.recipe.label} width="50" />
                        {recipe.recipe.label}
                    </li>
                ))}
            </ul>
        </div>
    );
};

export default Edamam;

5.虚假商店 API 示例

对于从事电商项目的开发者来说，Fake Store API 是一款非常棒的工具。它提供伪真实数据，您可以使用这些数据来填充商店中的产品、价格和类别。
链接

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 (
        <div>
            <h2>Fake Store Products</h2>
            <ul>
                {products.map(product => (
                    <li key={product.id}>
                        <img src={product.image} alt={product.title} width="50" />
                        {product.title}
                    </li>
                ))}
            </ul>
        </div>
    );
};

export default FakeStore;

6. Pokémon API 示例

宝可梦 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 (
        <div>
            <h2>Pokémon List</h2>
            <ul>
                {pokemonList.map((pokemon, index) => (
                    <li key={index}>
                        {pokemon.name}
                    </li>
                ))}
            </ul>
        </div>
    );
};

export default Pokemon;

7. IGDB API 示例

互联网游戏数据库 (IGDB) API 提供数千款电子游戏的数据，助您创建面向电子游戏的网站和应用程序。您可以获取有关游戏、平台、游戏类型等信息。
链接

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 (
        <div>
            <h2>Popular Video Games</h2>
            <ul>
                {games.map(game => (
                    <li key={game.id}>
                        {game.cover ? <img src={game.cover.url} alt={game.name} width="50" /> : null}
                        {game.name}
                    </li>
                ))}
            </ul>
        </div>
    );
};

export default IGDB;

结论

每个示例都展示了如何将相应的 API 集成到 React、Next 中。您可以轻松扩展这些示例以满足您的应用程序需求，无论是显示更详细的信息、处理用户交互，还是设置输出样式以提供更好的用户体验。

这些示例展示了从各种免费 API 获取和显示数据是多么简单。

文章来源：https://dev.to/vyan/7-free-apis-for-your-next-projects-50n3