CODEWITHSUNDEEP
typescriptnext.js
ythepaut
ythepaut

Reputation: 53

NextJS getStaticProps() never called

I am making a simple website and I would like to fetch data from an API and display it on my component. The problem is that the getStaticProps() method is never called.

Here is the code of the component :

import React from "react";
import {GetStaticProps, InferGetStaticPropsType} from "next";

type RawProject = {
    owner: string;
    repo: string;
    link: string;
    description: string;
    language: string;
    stars: number;
    forks: number;
}

function Projects({projects}: InferGetStaticPropsType<typeof getStaticProps>) {
    console.log(projects);
    return (
        <section id="projects" className="bg-white p-6 lg:p-20">
            <h1 className="sm:text-4xl text-2xl font-medium title-font mb-4 text-gray-900 pb-6 text-center">
                Quelques de mes projets
            </h1>
            {/*
            <div className="container px-5 mx-auto">
                <div className="flex flex-wrap">
                    {rawProjects.map((project: RawProject) => (
                        <ProjectCard
                            title={project.repo}
                            language={project.language}
                            description={project.description}
                            imageUrl="https://dummyimage.com/720x400"
                            repoUrl={project.link}
                        />
                    ))}
                </div>
            </div>
            */}
        </section>
    );
}

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 Projects;

The full code can be found here : https://github.com/ythepaut/webpage/tree/project-section

I am not sure if the problem is caused by the fact that I use typescript, or that I use a custom _app.tsx

I tried the solutions from :

but I couldn't make it work.

Could someone help me please ? Thanks in advance.

Upvotes: 5

Views: 5691

Answers (5)

Qing
Qing

Reputation: 51

I got a similar bad experience because of bad service worker implementation, if you found it works with "Empty Cache and Hard Reload", you should check your service-worker code, you may don't want to cache any pages. enter image description here

Upvotes: 1

Amin Yusuf
Amin Yusuf

Reputation: 11

In pages folder you must export getStaticProps too

Example

export { default } from '../../games/tebak-kata/game';
export { getStaticPaths } from '../../games/tebak-kata/game';
export { getStaticProps } from '../../games/tebak-kata/game';

Upvotes: 1

Ryan Le
Ryan Le

Reputation: 8412

You can only use getInitialProps, getServerSideProps, getStaticProps in Next.js pages

I checked your project and saw that your Project.tsx was in a component folder, but it needs to be in pages folder for those functions to work.

enter image description here

Upvotes: 2

Mohamed Ismail
Mohamed Ismail

Reputation: 367

Data fetching methods in NextJs like getStaticProps runs only on the server. Hence it works only in pages, not in a regular react component

Please Check their docs

For data fetching in Normal Components, You can only do client-side Rendering. NextJS recommends using this library SWR

According to their docs

SWR is a strategy to first return the data from cache (stale), then send the fetch request (revalidate), and finally, come with the up-to-date data.

Upvotes: 4

Nico
Nico

Reputation: 7256

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;

Upvotes: 8

Related Questions