API not fetch data with dynamic page NEXT js

Question

The dynamic page is working but does not fetch the data from any API

I'm encountering an issue with my Next.js dynamic page that's supposed to fetch data from an API but doesn't seem to be doing so. Despite implementing the code to fetch data, the page remains empty. I've checked the API endpoint, and it's functional as it returns data when accessed directly. Could someone please help me debug this problem? Below is the code snippet of my dynamic page.

this is my dynamic page code Path : src\app\Stocks[ticker]\page.js

"use client";
import { useRouter } from "next/navigation";
import { useEffect, useState } from "react";

const StockDetailsPage = () => {
  const router = useRouter();
  const [stockData, setStockData] = useState([]);

  useEffect(() => {
    fetchData();
  }, []);

  const fetchData = async () => {
    try {
      const apiUrl = "http://localhost:4000/stocks";
      const response = await fetch(apiUrl);
      if (!response.ok) {
        throw new Error("Failed to fetch data");
      }
      const data = await response.json();
      console.log("API Response:", data); // Log the API response
      if (!data || !data.stocks || !Array.isArray(data.stocks)) {
        throw new Error("Invalid data format");
      }
      setStockData(data.stocks); // Assuming the data is structured with a "stocks" array
    } catch (error) {
      console.error("Error fetching data:", error);
      setStockData([]);
    }
  };

  return (
    <>
      <div className="bg-background dark:bg-Background flex flex-col pl-[15px] pr-[15px] sm:pl-[100px] sm:pr-[40px] pt-2 sm:pt-4">
        <h1 className="mb-2">Stock Data</h1>
        <div className="rounded-2xl mb-4 sm:mb-8 dark:bg-gradient-to-tl from-[#101010] dark:to-[#161616] border dark:border-[#252525] bg-white flex-grow text-center">
          {stockData.map((stock) => (
            <div key={stock.ticker_id} className="p-4">
              <h2>{stock.ticker_id}</h2>
              <p>{stock.company_name}</p>
              <p>Price: {stock.price}</p>
              <p>Change: {stock.change}</p>
              <p>Change Percent: {stock.change_percent}</p>
              <p>Previous Close: {stock.prev_close}</p>
              <p>Open: {stock.open}</p>
              <p>Low: {stock.low}</p>
              <p>High: {stock.high}</p>
              <p>52 Weeks High: {stock["52_weeks_high"]}</p>
              <p>52 Weeks Low: {stock["52_weeks_low"]}</p>
              <p>Market Cap: {stock.market_cap}</p>
              <p>Volume: {stock.volume}</p>
              <p>Average Volume (3 Months): {stock.avg_vol_3_months}</p>
              <p>Turn Over: {stock.turn_over}</p>
              <p>Range: {stock.range}</p>
              <p>Shares Outstanding: {stock.shares_outstanding}</p>
              <p>Shares Float: {stock.shares_float}</p>
            </div>
          ))}
        </div>
      </div>
    </>
  );
};

export default StockDetailsPage;```


I was trying w`your text`ith multiple APIs, working in the console only

Answer 1

From the look of your code you seem to be making a call to this API endpoint http://localhost:4000/stocks but that doesn't look like the way API endpoint routes are structured ideally you should have something like "/api/stocks/{params.stockId}" is you have a folder structure like /api/stocks/[stockId] the varies based on what you name your folder. The params are provided with your function by default in Nextjs

const fetchData = async ({params}) => {
console.log(params)
}

Try to console log your params and see what it gives you