HNG
HNG

Reputation: 311

How to change getStaticProps in the new app router?

I am transitioning my React Next.js page router to app router. But I hit a roadblock when it comes to getStaticProps.

I have seen the suggestions from: https://github.com/vercel/next.js/issues/51860 , but it is not working for me.

Page router code that is working:

function CourseListPage() {
      return (
        <>
          <CourseList />
        </>
      )
    }
    
    export async function getStaticProps() {
      let errorCode = null
      let dehydratedState = {}
      const queryClient = new QueryClient({
        defaultOptions: {
          queries: {
            refetchOnWindowFocus: false
          }
        }
      })
    
      await queryClient.fetchQuery(['fetchODLTopics'], async () => {
        try {
          return (await getODLTopicsApi()) || null
        } catch (error: any) {
          errorCode = error?.response?.status || 400
          return null
        }
      })
      //compile and clear cache
      try {
        dehydratedState = dehydrate(queryClient)
        queryClient.clear()
      } catch (err) {
        console.log(err)
      }
      return { props: { errorCode, dehydratedState } }
    }
    
    export default CourseListPage

My app router code that is not working:

'use client'

function CourseListPage() {
  return (
    <>
      <CourseList />
    </>
  )
}

export async function getData() {
  let errorCode = null
  let dehydratedState = {}
  const queryClient = new QueryClient({
    defaultOptions: {
      queries: {
        refetchOnWindowFocus: false
      }
    }
  })
  await queryClient.fetchQuery(['fetchODLTopics'], async () => {
    try {
      return (await getODLTopicsApi()) || null
    } catch (error: any) {
      errorCode = error?.response?.status || 400
      return null
    }
  })
  //compile and clear cache
  try {
    dehydratedState = dehydrate(queryClient)
    queryClient.clear()
  } catch (err) {
    console.log(err)
  }
  return { props: { errorCode, dehydratedState } }
}

export default CourseListPage

Upvotes: 1

Views: 264

Answers (0)

Related Questions