1
resposta

Retorna o getStaticProps undefanid

quando eu uso o getStaticProps ele retornar undefanid

esse o o codigo

export async function getStaticProps(context) {

const test = " testado get static"


return {
  props: {
    test,
  },
}

}

export default function IntroduçãoAQuimicaScreen ({test}) {

console.log(test)
return (
    <>

    <Principal>


        <Box tag="section">
            <Titulo   cl="pr" tag="h1" tm="g">
                Introdução A Quimica
            </Titulo>
            <Paragrafo tag="p">
                A Quimica e um ramo na ciências que estuda a 
                <br/>
                &rarr; <TextoForte> Mataria </TextoForte>
                <br/>
                &rarr;   <TextoForte>  trasformaçoes </TextoForte>
                <br/>
                &rarr;  <TextoForte>  energias envolvidas </TextoForte>
            </Paragrafo>
            <Titulo   cl="pr" tag="h2" tm="g"> 
                construçao da materia
            </Titulo>
            <Paragrafo tag="p"> 
                um filosofo grego que sustenta que toda materia e constituida de particulas indivisives que na sua asênsia temos vacuo
            </Paragrafo>


            <Titulo   cl="pr" tag="h1" tm="g">
               Materia
            </Titulo>

            <Paragrafo tag="p"> 
                e tudo que tem massa e ocupa um lugar no espaço
            </Paragrafo>

            <Imagem src="/img/quimica/mapaMentalDeIntroduçaoAQuimica.png" alt="mapa mental de introducao A quimica"/>

            <section>
            <iframe width="560" height="315" src="https://www.youtube.com/embed/XDBwYrWFZUQ?start=4" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>

             </section>


        </Box>

    </Principal>

    <style jsx>

        { `
        section{
                margin-top:1rem ;
                width: 100%;
                display: flex;
                justify-content: center;
                align-items: center;

            }
        `}
    </style>

    </>
)

}

1 resposta

Oi Gabriel, tudo bem?

Desculpe a demora em retornar.

O erro que você está enfrentando com o getStaticProps pode ser causado por algumas razões. A primeira coisa a verificar é se você está usando o getStaticProps em um arquivo que está dentro da pasta pages do seu projeto Next.js. Isso é necessário porque o Next.js usa a estrutura de pastas para gerar as rotas da aplicação. Então, se você estiver usando o getStaticProps em um arquivo fora da pasta pages, o Next.js não será capaz de gerar a rota para essa página e o getStaticProps retornará um valor undefined.

Outra razão comum para o getStaticProps retornar undefined é quando não há return statement dentro do bloco do getStaticProps. No seu código, você já tem um return statement que retorna um objeto com a prop test. Então, esse não é o problema.

Uma outra possibilidade é que você não esteja passando as props corretamente para o componente. No seu código, você está passando a prop test para o componente IntroduçãoAQuimicaScreen usando a sintaxe de desestruturação no argumento da função. Então, se o getStaticProps estiver retornando um objeto com a propriedade test, isso deve funcionar corretamente.

No entanto, eu noto que você não está usando a prop test dentro do componente IntroduçãoAQuimicaScreen. Em vez disso, você está fazendo um console.log(test). Se você quiser ver o valor da prop test renderizado na página, você precisará fazer algo como:

export default function IntroduçãoAQuimicaScreen ({test}) { 
  return (
    <>
      <h1>{test}</h1>
      <p>A Quimica e um ramo na ciências que estuda a</p>
      ...
    </>
  )
}

Além disso, como você está usando o getStaticProps, é importante lembrar que ele só funciona no ambiente de produção. Isso significa que, se você estiver executando sua aplicação no ambiente de desenvolvimento, o getStaticProps não será executado e você não verá o valor da prop test.

Por fim, sugiro que você verifique se a versão do Next.js que você está usando é compatível com o getStaticProps. A partir da versão 9.3 do Next.js, o getStaticProps recebe um objeto context como argumento, que contém informações sobre a rota que está sendo acessada. Então, se você estiver usando uma versão anterior do Next.js, essa sintaxe pode não funcionar corretamente.

Espero que tenha te ajudado, bons estudos!

Quer mergulhar em tecnologia e aprendizagem?

Receba a newsletter que o nosso CEO escreve pessoalmente, com insights do mercado de trabalho, ciência e desenvolvimento de software