I cant debug getStaticProps
Unanswered
Spectacled bear posted this in #help-forum
Spectacled bearOP
Im trying to debug what is wrong with my getStaticProps function on a dynamic page since is returning a underfined props. I want to log what is going inside the function but is showing nothing, I dont unterstand if it is not executing at all.
For some context: All my pages are inside the app folder, and the page which is having the error have the next directory 'app/product/[id]/page.jsx
The code for getStaticProps im using is:
export async function getStaticProps(context) {
console.log(console.log(context.params))
const { id } = context.params;
const product = productsData.find((product) => product.id.toString() === id);
console.log("StaticProp", product)
return {
props: { product }
};
}
What im doing wrong?
For some context: All my pages are inside the app folder, and the page which is having the error have the next directory 'app/product/[id]/page.jsx
The code for getStaticProps im using is:
export async function getStaticProps(context) {
console.log(console.log(context.params))
const { id } = context.params;
const product = productsData.find((product) => product.id.toString() === id);
console.log("StaticProp", product)
return {
props: { product }
};
}
What im doing wrong?
9 Replies
joulev
app directory doesn't have getStaticProps
Spectacled bearOP
Why? What should I do now? The tutorial I was following told us to use the /app structure because it's supposedly the new way to do it in Next.js 13 onwards.
Spectacled bearOP
thanks! Im going to read it
Spectacled bearOP
Joulev, could you give a little bit of orientation? In my case Im fetching the data for my dynamic product page from a jsx file which only contains a exported object with all the products data ( Im not using a DB because is not that much and the products will be always the same ). Im reading in Next 13 doc you sent me, and I saw that now you can use the fetch function directly on the exported page code without needing to define getStaticProps. For this particular way Im using to retrieve the data, do you know if I should use the fetch function or should I retrieve the data directly from the imported file? I would like to have the pages statically generated when building the website
joulev
just import the file directly
import data from "./data.json";
export default function Page() {
return <div>{data.name}</div>;
}Spectacled bearOP
thanks! So... doing something like this will also generate the static pages for all products? the data.json contains the info from all the products.
Or I should do something else / more?
export default function page(props){
const id = props.params.id
const product = productsData.find((product) => product.id.toString() === id);
return(
<div> product.name </div>
)
...Or I should do something else / more?
joulev
you probably need this as well https://nextjs.org/docs/app/api-reference/functions/generate-static-params
Spectacled bearOP
thanks Man! You saved me