Next js component doesn't show without reload

Question

Basically, I have a nested component that I want to render with the parent component and it's working fine when the server starts.

But the problem arises when I switch back from another page. Some of the nested components get disappeared. If I made a refresh then again everything ok.

How can I solve this issue?

Normal: Image-1

Component disappeared: Image-2

Index.js:

import BannerBaseLine from "./../components/HOME/Banner/BannerBaseLine";
import SubSection1 from "./../components/ABOUT/subSection1";
import CoursesList from "../components/HOME/MOSTTRENDING/CoursesList/courseslist";
import ShortOverview from "./../components/HOME/CourseOverviewSection/Section1/shortoverview";
import Testimonial from "./../components/HOME/Testimonial/testimonial";
import ClientItem from "./../components/HOME/Client-area/all-client-item";

export default function HomeMain({categories}) {
  return (
    <>
      <br></br>
      <br></br>
      <br></br>
      <BannerBaseLine categories = {categories} />
      <CoursesList />
      {/* <SubSection1 /> */}
      <ShortOverview />
      <CoursesList />
      <Testimonial />
      <ClientItem />
    </>
  );
}

export async function getStaticProps(){
  const response = await fetch('http://localhost:8000/api/data/categories')
  const data = await response.json()

  console.log(data)
  return {
    props:{
      categories : data, 
    }
  }
}

BannerBaseLine component:

import BannerBlock from './BannerBlock';
    export default function BannerBaseLine({ categories }) {
      return (
        <>
          <section
            className="banner-area"
            style={{ backgroundImage: "url(assets/img/banner/0.jpg)" }}
          >
            <div className="container">
              <div className="row">
                <div className="col-lg-6 col-md-8 align-self-center">
                  <div className="banner-inner text-md-start text-center">
                    <h1>
                      Find the Best <span>Courses</span> & Upgrade{" "}
                      <span>Your Skills.</span>
                    </h1>
                    <div className="banner-content">
                      <p>
                        Edufie offers professional training classes and special
                        features to help you improve your skills.
                      </p>
                    </div>
                    <div className="single-input-wrap">
                      <input type="text" placeholder="Search your best courses" />
                      <button>
                        <i className="fa fa-search"></i>
                      </button>
                    </div>
                  </div>
                </div>
              </div>
            </div>
          </section>
          <br></br>
          <br></br>
          <div className="container">
            <div className="intro-area-2">
              <div className="row justify-content-center">
                <div className="col-lg-12">
                  <div className="intro-slider owl-carousel">
                    {categories.map((category) => {
                      return (
                        <>
                          <BannerBlock category={category} key={category.id} />
                        </>
                      );
                    })}
                  </div>
                </div>
              </div>
            </div>
          </div>
        </>
      );
    }

BannerBlock component:

    export default function BannerBlock({category}) {
  console.log(category);
  return (
    <div className="item">
      <div className="single-intro-wrap">
        <div className="thumb">
          <img src={category.image} alt="img" />
        </div>
        <div className="wrap-details">
          <h6>
            <a href="#">{category.Base_Category_Title}</a>
          </h6>
          <p>236 Course Available</p>
        </div>
      </div>
    </div>
  );
}

You should show how and where call api. This error not in your componet — Viet, Sep 04 '21 at 15:48
Now, I have been attached My "index.js" file. But this problem was started before API attachment. — Pronob Mozumder, Sep 04 '21 at 16:08

score 0 · Answer 1 · answered Sep 04 '21 at 17:02

From https://nextjs.org/docs/basic-features/data-fetching#getstaticprops-static-generation

Note: You should not use fetch() to call an API route in getStaticProps. Instead, directly import the logic used inside your API route. You may need to slightly refactor your code for this approach.

Fetching from an external API is fine!

score 0 · Answer 2 · answered Sep 05 '21 at 00:27

0

you should check if categories exist

export default function HomeMain({categories}) {
if(categories){
return <Loading Component />
}

rest of the code...

}

answered Sep 05 '21 at 00:27

Yehuda Zvi

239
3
9

Next js component doesn't show without reload

2 Answers2