GetStaticProps() of embedded page inside of app root page, not returning data. Not sure what to do?
Unanswered
American Fuzzy Lop posted this in #help-forum
American Fuzzy LopOP
Hi everyone! I have a Next.js 14 application. Inside it I'm modifying the /app/pages.tsx (root page) to load another page in the pages folder /pages/HomePage.tsx as the default to appear when first opening the application. By putting it in the return rendering section of /app/pages.tsx.
The HomePage uses the getStaticProps function to load data from a database.
If I load the page directly using 'http://localhost:3000/HomePage' the data is fetched and parsed into the page correctly.
However, when I load the HomePage from inside /app/pages.tsx it doesn't fetch the data, at least not before rendering.
So it returns an error due to the missing data instead.
How do I fix this problem, so the page returns the data during rendering properly so I can use getstaticprops to fetch data in the HomePage?
Here is the code for the two pages involved:
app/page.tsx code:
pages/HomePage.tsx code:
The HomePage uses the getStaticProps function to load data from a database.
If I load the page directly using 'http://localhost:3000/HomePage' the data is fetched and parsed into the page correctly.
However, when I load the HomePage from inside /app/pages.tsx it doesn't fetch the data, at least not before rendering.
So it returns an error due to the missing data instead.
Error : Unhandled Runtime Error
Error: Cannot read properties of undefined (reading 'data')
Source
pages\HomePage.tsx (11:34) @ data
9 |
10 | console.log(props: ${JSON.stringify(props)})
11 | const content = props.content.data
How do I fix this problem, so the page returns the data during rendering properly so I can use getstaticprops to fetch data in the HomePage?
Here is the code for the two pages involved:
app/page.tsx code:
import HomePage from '@/pages/HomePage'
const Home = () => {
return (
<HomePage />
)
}
export default Homepages/HomePage.tsx code:
const HomePage = (props: any) => {
console.log(props: ${JSON.stringify(props)})
const content = props.content.data
return (
<LayoutDefault title={content.attributes.Title}>
<div>
Some content.
</div>
</LayoutDefault>
)
}
export async function getStaticProps() {
const content = await fetchQuery('pages/1');
return {
props: {
content,
},
};
}
export default HomePage4 Replies
getStaticPaths only works inside of Pages
Instead use
generateStaticParamsexport async function generateStaticParams() {
// Fetch dynamic data
const res = await fetch('https://.../posts')
const posts = await res.json()
// Generate paths
return posts.map((post) => ({
slug: post.slug,
}))
}@American Fuzzy Lop