full stack Nextjs on pages with hono | Sometimes Work, Sometimes Not

  useEffect(() => {
    const fetchNews = async () => {
      try {
        const response = await fetch("/api/news/top");
        if (!response.ok) {
          throw new Error(`HTTP error! status: ${response.status}`);
        }
        const data = await response.json();
        setDropDownArticles(data as NewsData);
        const article_list: topArticle[] = [];

        Object.keys(data as NewsData).forEach((category) => {
          (data as any)[category].slice(0, 2).forEach((items: Article) => {
            const item: topArticle = {
              title: items.title,
              image_url: items.image_url,
            };
            article_list.push(item);
          });
        });

        setTopArticles(article_list);
      } catch (error) {
        console.error("Error fetching news: ", error);
      }
    };

    fetchNews();
  }, []);

app.get("/news/top", async (ctx) => {
  try {
    const { KV } = getRequestContext().env;

    const keys = ["business", "politics", "sports", "tech", "business"]; // Changed the last key to "top"
    const promises = keys.map((key) => KV.get(key));

    const [business_news, politics_news, sports_news, tech_news, top_news] =
      await Promise.all(promises);

    const news = {
      business: JSON.parse(business_news || "null"),
      politics: JSON.parse(politics_news || "null"),
      sports: JSON.parse(sports_news || "null"),
      tech: JSON.parse(tech_news || "null"),
      top: JSON.parse(top_news || "null"),
    };

    return ctx.json(news);
  } catch (error) {
    console.error("error: ", error);
    return ctx.json({ message: "Internal server error" });
  }
});