NextJS getStaticProps() never called

by

getStaticProps() is only allowed in pages.

Your code at the moment is :

import Hero from "../sections/Hero";
import Contact from "../sections/Contact";
import Projects from "../sections/Projects"; // you cannot call getStaticProps() in this componenet

function HomePage(): JSX.Element {
    return (
        <div className="bg-gray-50">
            <Hero />
            <Projects />
            <Contact />
        </div>
    );
}

export default HomePage;

Instead call getStaticProps() inside index.tsx and pass the props to the component something like this ::

import Hero from "../sections/Hero";
import Contact from "../sections/Contact";
import Projects from "../sections/Projects"; 

function HomePage({data}): JSX.Element {
    return (
        <div className="bg-gray-50">
            <Hero />
            <Projects data={data} />
            <Contact />
        </div>
    );
}

export const getStaticProps: GetStaticProps = async () => {
    console.log("getStaticProps()");
    const res = await fetch("https://gh-pinned-repos-5l2i19um3.vercel.app/?username=ythepaut");
    const projects: RawProject[] = await res.json();
    return !projects ? {notFound: true} : {
        props: {projects: projects},
        revalidate: 3600
    };
}
export default HomePage;

More Related Contents:

  1. TypeScript: Object.keys return string[]
  2. Does Typescript support mutually exclusive types?
  3. How to implement a typescript decorator?
  4. How to convert a string to number in TypeScript?
  5. What does the “as const” mean in TypeScript and what is its use case?
  6. Typescript: Check “typeof” against custom type
  7. Angular2 – should private variables be accessible in the template?
  8. Typescript check object by type or interface at runtime with typeguards in 2020+
  9. How to use fetch in TypeScript
  10. TypeScript: void return type converted to any type?
  11. Default parameters with generics in TypeScript
  12. Changing Property Name in Typescript Mapped Type
  13. Unable to import svg files in typescript
  14. Typescript 2.0. “types” field in tsconfig.json
  15. for-in statement
  16. Merge Two Interfaces
  17. Why can’t the generic interface in TS infer the type correctly?
  18. Typescript: ReturnType of overloaded function
  19. What’s the meaning of “=>” in TypeScript? (Fat Arrow)
  20. How to use array.map with tuples in typescript?
  21. how to remove properties via mapped type in TypeScript
  22. TypeScript sorting an array
  23. “An index signature parameter type cannot be a union type.” – what should I use instead?
  24. Detailed differences between type annotation `variable: type` and type assertion `expression as type` in TypeScript
  25. Generic and typeof T in the parameters
  26. How to make “handler” lookup for “dispatcher” style function be typed correctly
  27. How to prevent Next.js from instantiating a singleton class/object multiple times?
  28. How to define an interface for objects with dynamic keys?
  29. Types from both keys and values of object in Typescript
  30. Modules vs. Namespaces: What is the correct way to organize a large typescript project?

Leave a Comment