I've been facing an issue for a few weeks now that is interrupting my learning and development. My project works fine in the dev environment, but I can no longer release it to production on Vercel. But I can't make it work, I've tried everything I found on the internet but I can't fix the project;
Before the code was a little different, the "find" method was inside getStaticProps, and it was giving me the error "ERROR TypeError: Cannot read properties of undefined (reading 'find')".
Worst of all is that anyway it was and is working in the dev environment
Now I'm facing the following error:
Error occurred prerendering page "/produtos/Heróis". Read more: https://nextjs.org/docs/messages/prerender-error
Error: Error serializing .produtos returned from getStaticProps in "/produtos/[categoria]".
Reason: undefined cannot be serialized as JSON. Please use null or omit this value.
I would be very grateful if someone could tell me where I'm going wrong. I'm losing my hair already.
github: https://github.com/oliveirabruno01/site_estilo_refactored (the error are ocurring in /produtos/[categoria] page)
getStaticPaths:
export async function getStaticPaths() {
const res = await fetch('https://bling.com.br/Api/v2/categorias/json/&apikey=eda45968702e9e3ff10bb3dbd0fdd14286ecac428363231ed48271ad38fb7067b8578dbc');
const res_json = await res.json();
const categorias = res_json.retorno.categorias;
const paths = categorias.map(_categoria => ({
params: {
categoria: _categoria.categoria.descricao
}
}));
return { paths, fallback: 'blocking' }
}
getStaticProps
export async function getStaticProps( {params} ) {
let categorias;
let produtos;
const categorias_res = await fetch('https://bling.com.br/Api/v2/categorias/json/&apikey=eda45968702e9e3ff10bb3dbd0fdd14286ecac428363231ed48271ad38fb7067b8578dbc');
const cat_json = await categorias_res.json();
const produtos_res = await fetch('https://bling.com.br/Api/v2/produtos/json/&apikey=eda45968702e9e3ff10bb3dbd0fdd14286ecac428363231ed48271ad38fb7067b8578dbc&imagem=S');
const pro_json = await produtos_res.json();
categorias = cat_json.retorno.categorias;
produtos = pro_json.retorno.produtos;
console.log(categorias);
if (!categorias || !produtos || !nome) return {
props: {categorias: [], produtos: [], nome: params.categoria}
};
return { props: {categorias: JSON.parse(JSON.stringify(categorias)), produtos: JSON.parse(JSON.stringify(produtos)), nome: params.categoria}}
}
page component
export default function ProdutosCategoria( {categorias=null, produtos=null, nome=null} ) {
if (!categorias || !produtos || !nome) return <><h1>Something did wrong :/</h1></>;
const f_item = categorias?.find((cat) => cat?.categoria.descricao == nome);
const item = f_item?.categoria;
return <>
<Head>
<title>Estilo Criação: { item.descricao }</title>
</Head>
<div id={styles.corpo}>
<h1 className={styles.titulo}>Categoria { item.descricao }</h1>
<br></br>
<Row>
{
produtos?.map((_produto, i) => (
<Col xs={12} sm={6} md={6} lg={3} xl={3} key={_produto.produto.id}>
<ProductsSingle item_data={_produto.produto} />
</Col>
))
}
</Row>
</div>
</>
}
ProductsSingle component:
export default function ProductsSingle({item_data=null}){
const [num, setNum] = useState(1)
if (!item_data) return null;
return(
<Link href={"/produto/" + item_data.descricao }>
<div className={styles.produto} id={styles.delimitador}>
<img src={item_data.imagem[num].link} onMouseEnter={() => setNum(3)} onMouseLeave={() => setNum(1)}/>
<h4>{item_data.descricao}</h4>
<h3 className={styles.preço}>R$ {Number.parseFloat(item_data.preco).toFixed(2)}</h3>
<p>até <strong>3x</strong> de <strong>R$ {Number.parseFloat(item_data.preco/3).toFixed(2)}</strong> sem juros</p>
<Button variant="success" className={styles.comprar}>Comprar</Button>
</div>
</Link>
)
}