Build a News Aggregator Using Next.js

// page.js

"use client";
import "bootstrap/dist/css/bootstrap.min.css";
import { useState, useEffect } from "react";
import { fetchNews } from "./lib/fetchNews";

export default function Home() {
    const [articles, setArticles] = useState([]);
    const [category, setCategory] = useState("sports");
    const [page, setPage] = useState(1);

    const categories = [
        "business",
        "entertainment",
        "general",
        "health",
        "science",
        "sports",
        "technology",
    ];

    useEffect(() => {
        const getNews = async () => {
            const data = await fetchNews(category, page);
            setArticles(data.articles);
        };
        getNews();
    }, [category, page]);

    return (
        <div className="container mt-4">
            <h1 className="text-center mb-4 text-success">GFG News Aggregator</h1>
            <div className="mb-3">
                <select
                    className="form-select"
                    value={category}
                    onChange={(e) => setCategory(e.target.value)}
                >
                    {categories.map((cat) => (
                        <option key={cat} value={cat}>
                            {cat.charAt(0).toUpperCase() + cat.slice(1)}
                        </option>
                    ))}
                </select>
            </div>
            <div className="row">
                {articles.map((article, index) => (
                    <div key={index} className="col-md-4 mb-4">
                        <div className="card">
                            <img
                                src={article.urlToImage || "https://via.placeholder.com/150"}
                                className="card-img-top"
                                alt={article.title}
                            />
                            <div className="card-body">
                                <h5 className="card-title">{article.title}</h5>
                                <p className="card-text">{article.description}</p>
                                <a
                                    href={article.url}
                                    className="btn btn-primary"
                                    target="_blank"
                                    rel="noopener noreferrer"
                                >
                                    Read more
                                </a>
                            </div>
                        </div>
                    </div>
                ))}
            </div>
            <div className="d-flex justify-content-between mt-4">
                <button
                    className="btn btn-secondary"
                    onClick={() => setPage(page > 1 ? page - 1 : 1)}
                    disabled={page <= 1}
                >
                    Previous Page
                </button>
                <button className="btn btn-secondary" onClick={() => setPage(page + 1)}>
                    Next Page
                </button>
            </div>
        </div>
    );
}

// lib/fetchNews.js

import axios from "axios";

const apiKey = "YOUR_API_KEY";
const pageSize = 40;

export const fetchNews = async (category = "technology", page = 1) => {
    try {
        const url = `https://newsapi.org/v2/everything?q=$
        {category}&pageSize=${pageSize}&page=${page}&apiKey=${apiKey}`;
        const response = await axios.get(url);
        return response.data;
    } catch (error) {
        console.error("Error fetching news:", error);
        return { articles: [] };
    }
};