Can't use GetStaticProp in Next.js 13

Question

I am following a tutorial online that uses the older version of Next.js. I am now using Next.js 13, and tried to implement GetStaticProp() to fetch data from my api, but cannot use that function under the app folder.

I am now trying to implement the data fetching as Next.js suggests to do it (https://beta.nextjs.org/docs/data-fetching/fetching). The error that I am getting is:

Unhandled Runtime Error Error: Cannot read properties of undefined (reading 'slice')

My code is:

import Layout from "components/Layout.js";
import ResourceHighlight from "components/ResourceHighlight.js";
import ResourceList from "components/ResourceList.js";
import Newsletter from "components/Newsletter.js";
import Footer from "components/Footer.js";


function Home({resources}) {
  return ( 
    <Layout> 
     <ResourceHighlight
        resources={resources.slice(0,2)}
      />
      <ResourceList
        resources={resources.slice(2)}
      />
       <Newsletter /> 
      <Footer />
    </Layout>
  )
}

export async function getData(){ 
  const resData = await fetch('http://localhost:3000/api/resources"'); 
  const data = await resData.json(); 

  //return resData.json(); 

  return { 
    props: { 
      resources: data
    }
  }
}


// export async function getStaticProps() {

//   const resData = await fetch("http://localhost:3000/api/resources");
//   const data = await resData.json();

//   return {
//     props: {
//       resources: data
//     }
//   }
// }



export default Home;

Any help is appreciated. Thanks in advance!

I tried to implement the new function with guidance from the next.js documentation but something is not working.

This question was closed as a duplicate even though it is top of Google when looking for help with using GetStaticProp in Next.js 13 Wrote up an answer to help rookies like me here https://stackoverflow.com/a/76766776/1296746 — Joshua Dance, Jul 25 '23 at 22:07

score 4 · Answer 1 · answered Mar 09 '23 at 06:39

In next.js 13, getServerSideProps, getStaticProps, and getInitialProps are not supported in server components which uses app directory as stated in next js beta docs that you linked. Reason of error you are getting is that resources is undefined. Please check resources value.

score 2 · Answer 2 · edited May 16 '23 at 00:36

2

Maybe NextJS vs 13.4 does not support getStaticProps but you can't use same as:

This request should be cached until manually invalidated. Similar to getStaticProps. force-cache is the default and can be omitted. fetch(URL, { cache: 'force-cache' });

This request should be refetched on every request. Similar to getServerSideProps. fetch(URL, { cache: 'no-store' });

This request should be cached with a lifetime of 10 seconds. Similar to getStaticProps with the revalidate option. fetch(URL, { next: { revalidate: 10 } });

edited May 16 '23 at 00:36

user16217248

3,119
19
19
37

answered May 13 '23 at 15:03

Nam Phạm Hoài

21
1

As it’s currently written, your answer is unclear. Please [edit] to add additional details that will help others understand how this addresses the question asked. You can find more information on how to write good answers [in the help center](/help/how-to-answer). – Community May 13 '23 at 17:52

score 1 · Answer 3 · answered Jun 20 '23 at 09:09

You can still use Pages Router, if you would like to use getStaticProps and related functionalities. For new applications, Next.js recommends using the App Router and existing applications can incrementally migrate to the App Router.
It's unclear why you have used slice method for resources JSON object since it's intended for an Array. If you're using the App Router, this kind of approach can be used here:

import Layout from "components/Layout.js";
import ResourceHighlight from "components/ResourceHighlight.js";
import ResourceList from "components/ResourceList.js";
import Newsletter from "components/Newsletter.js";
import Footer from "components/Footer.js";

async function getResources() {
  const res = await fetch('https://example.com/api/resources');
  // Handle errors
  return res.json();
}

export default async function Home() {
  const resources = await getResources();
  const resourcesArray = Object.values(resources);
  return (
    <Layout>
      <ResourceHighlight resources={resourcesArray.slice(0, 1)} />
      <ResourceList resources={resourcesArray.slice(1)} />
      <Newsletter />
      <Footer />
    </Layout>
  );
}

As @Nam mentioned, if you want to dynamically fetch the data (fresh data on every fetch request), use the cache: 'no-store' option.

More information about Data Fetching:

Tyki · Answer 4 · 2023-07-17T18:33:47.820

1

actually getStaticProps is not supported in next.js 13 instead you should use generateStaticParams. ref the github issue

edited Jul 17 '23 at 18:33

answered Jul 17 '23 at 18:32

Tyki

11
3

score 0 · Answer 5 · answered Jun 23 '23 at 03:27

you are getting that error because getStaticProps is not returning any thing. Resources values is null in props.

This code will work without error

function Home({resources}) {
  return ( 
    <Layout> 
     <ResourceHighlight
        resources={resources?.slice(0,2)}
      />
     
   )}

Can't use GetStaticProp in Next.js 13

5 Answers5

Linked

Related