CODEWITHSUNDEEP
reactjsnext.js
Maxime Ghéraille
Maxime Ghéraille

Reputation: 1935

empty object with getStaticProps and typescript

I'm trying to fetch some data and via the doc's it seems it has to be via getStaticProps but I keep getting an empty object when logging the props inside my component

if you have any idea why feel free to let me know

here is my _app.tsx

const Child:React.FC = ({ children }) => {
    
  const isDark = useSelector<ThemeState, ThemeState["isDark"]>(state => state.isDark)

  return <div className={`${isDark ? "dark blackThemeColor test" : "white whiteThemeColor"}` + " min-h-screen font-body pr-0"} style={{height:'150vh'}}>{children}</div>;
}

const MyApp = ({ Component, pageProps }: AppProps) => {
  return (
    <Provider store={ThemeStore}>
     <Application theme={theme}> 
        <Child>
          <Navigation {...pageProps} /> 
          <Component {...pageProps} />
        </Child>
      </Application> 
    </Provider>
  );
};
export default MyApp

and my navigation.tsx

interface NavProps {
    title: string;
    body: string;
    id: number;
    userId: number
}


const Navigation: React.FC<NavProps> = (props: NavProps) => {

    useEffect(() => {
        console.log(props)
    }, [])
    console.log(props)
    return (
        <>
            <div className={`w-full h-full `}>
                <p>{props.title}</p>
            </div>

        </>
    )
}

export default Navigation


export const getStaticProps: GetStaticProps = async (context) => {
    const res = await fetch("https://jsonplaceholder.typicode.com/posts?_limit=6")
    const data: NavProps = await res.json();
    console.log(data)
    return {
        props: {
            data
        }
    }
}

Upvotes: 0

Views: 245

Answers (1)

Gh05d
Gh05d

Reputation: 8982

From your comment I take that the navigation.tsx file is not located in the pages folder. To quote the docs:

getStaticProps can only be exported from a page. You can’t export it from non-page files.

So you have to move the function to the page / route where you want to fetch the data or do it clientside.

Upvotes: 1

Related Questions