[RESOLVIDO] NEXTJS: Generating static pages TypeError: Cannot read properties of undefined
Estou fazendo um blog simples, e guardei umas imagens do Cloudinary, setei as configs do next, tudo certo... No codeSandBox, tudo funciona certinho, mas quando vou fazer o build me gera esse seguinte erro: Generating static pages (0/25)TypeError: Cannot read properties of undefined(reading 'contact') essa parte do "reading('contact')" eu já testei, e pelo que parece, é uma das coisas que eu retorno em uma função getStatitcProps, e bem provavel que o erro esteja gerando lá... segue o código:
export async function getStaticProps() {
async function getBlurredImage(imageId: string): Promise<string | undefined> {
const response = await fetch() // api
const buffer = await response.arrayBuffer()
const data = Buffer.from(buffer).toString("base64")
return `data:image/webp;base64,${data}`
}
return {
props: {
images: {
logo: "portfolio/logo_be87dl.png",
profile: "portfolio/myPhoto_jsruis.png",
portfolio: {
jessica_bede: "portfolio/portfolio/jessica_bede_kjkilr.png",
blurred_jessica_bede: await getBlurredImage(
"portfolio/portfolio/jessica_bede_kjkilr.png",
),
netflix_clone: "portfolio/portfolio/netflix_clone_xkzipt.png",
blurred_netflix_clone: await getBlurredImage(
"portfolio/portfolio/netflix_clone_xkzipt.png",
),
CRUD: "portfolio/portfolio/CRUD_ynni3g.png",
blurred_CRUD: await getBlurredImage(
"portfolio/portfolio/CRUD_ynni3g.png",
),
login_azure: "portfolio/portfolio/login_azure_flhiqx.png",
blurred_login_azure: await getBlurredImage(
"portfolio/portfolio/login_azure_flhiqx.png",
),
site2it: "portfolio/portfolio/site2it_w2wt53.png",
blurred_site2it: await getBlurredImage(
"portfolio/portfolio/site2it_w2wt53.png",
),
escolinha: "portfolio/portfolio/escolinha_orbnuy.png",
blurred_escolinha: await getBlurredImage(
"portfolio/portfolio/escolinha_orbnuy.png",
),
},
contact: {
whatsapp: "portfolio/contact/wpp_xpneaq.png",
linkedin: "portfolio/contact/linkedin_i5qx3c.png",
github: "portfolio/contact/github_yhj9w7.png",
},
services: "portfolio/web_ylnmu9.svg",
},
},
}
}
configs do next:
const nextConfig = {
images: {
loader: "cloudinary",
path: cloudinaryBaseUrl,
},
...
}
eu estou pegando essa prop images do getStaticProps e distribuindo de maneira global usando useContext.
export const ContentContext = createContext<ContextData>({} as ContextData)
export default function Index({ images }) {
return(
<>
<ContentContext.Provider value={{ images }}>
{children}
</ContentContext.Provider>
</>
)
}
repo: https://github.com/antonionetodeveloper/novo-portifolio
Talvez seja pq você não está usando o getStaticPaths, não vou saber te explicar pois eu ainda estou estudando e ainda tenho duvidas sobre isso também.
Porém, no tutorial do próprio Next Js, eles criam um blog, e quando ele vai fazer a consulta dos posts, ele precisa usar ambos, o getStaticProps, e o getStaticPaths pra "listar" quais são os dados dinâmicos... Segue o exemplo do tutorial aqui
SOLUÇÃO
Resolvi meu problema chamando as Imagens com o operador lógio "?"
ANTES:
<Image
src={images.profile}
...
/>
DEPOIS:
<Image
src={images?.profile}
...
/>