Reputation: 311
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