'This error happened while generating the page. Any console logs will be displayed in the terminal window

1st time its show this error

enter image description here

I want to make an API call to my API route using Axios. When I run my code the first time its shows that error but when I refresh my mage it works perfectly. I can't understand what I do.

import axios from "axios";
import Head from "next/head";
import Banner from "../components/Banner";
import Footer from "../components/Footer";
import HeroSection from "../components/HeroSection";
import ServicesSection from "../components/ServicesSection";
import MyWork from "../components/work/MyWork";

function Home({ workList }) {
  return (
    <>
      <Head>
        <title>EmonS - Fullstack web developer & Designer</title>
        <meta
          name="description"
          content="This is a portfolio website which made by Jahidul Islam Emon. Here you can find work history and knowledge about Author. That is a One page application. Enjoy ."
        />
        <meta
          name="keywords"
          content="Creative, minimal, Portfolio, business, Resume, Information, personal portfolio, Professional"
        />
        <meta name="author" content="Jahidul Islam Emon"></meta>
        <link rel="icon" href="/favicon.ico" />
      </Head>

      <HeroSection />
      <ServicesSection />
      <MyWork emon={workList} />
      <Banner />
      <Footer />
    </>
  );
}

export async function getServerSideProps() {
  const mydomain = process.env.MY_DOMAIN;

  const res = await axios.get(mydomain + "/api/work");
  return {
    props: {
      workList: res.data,
    },
  };
}

export default Home;

why this error happens?



Solution 1:[1]

Make sure to add the await operator before dbConnect in your api, I had the same issue and this solved it...

so it should look like this:

await dbConnect();

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source
Solution 1