Entrar Ainda não tem acesso?
2
respostas

Alguma coisa mudou no Next 13? faq retorna undefined.

Referente ao curso Next.js: explorando o framework, no capítulo Dados dinâmicos no Next.js e atividade getStaticProps

por Lucas Vinnicio de Araujo Santana
| 93.3k xp | 15 posts

Tive bastante problema para usar o getStaticProps, após vasculhar tudo vi que retorna undefined, por isso qualquer método que uso nele quebra a aplicação 'can't read properties of undefined'. Se removo o map, a página retorna. O código está identico ao do professor, copiei do repositório.

import Head from 'next/head'
import LinkComp from '@/components/Link';

// SSG - Static Site Generation
// SSR - Server Side Rendering
// ISG - Incremental Static Generation

// export async function getServerSideProps() {
//     console.log('Em modo DEV, sempre roda! A cada acesso')
//     console.log('Rodando a cada acesso que você recebe')
export async function getStaticProps() {
    console.log('Em modo DEV, sempre roda! A cada acesso')
    console.log('Roda SOMENTE em build time')
    const FAQ_API_URL = 'https://gist.githubusercontent.com/omariosouto/0ceab54bdd8182cbd1a4549d32945c1a/raw/578ad1e8e5296fa048e3e7ff6b317f7497b31ad9/alura-cases-faq.json';
    const faq = await fetch(FAQ_API_URL)
        .then((respostaDoServidor) => {
            return respostaDoServidor.json();
        })
        .then((resposta) => {
            return resposta;
        });

    return {
      props: {
          qualquercoisa: 'que eu passar aqui',
          faq,
      },
    };
}  

export default function FAQPage({ faq }) {
    console.log('Isso roda no servidor???')
    console.log(typeof(faq))
    return (
        <div>
            <Head>
                <title>FAQ - Alura Cases Campanha</title>
            </Head>
            <h1>Alura Cases - Páginas de Perguntas FAQ</h1>
            <LinkComp href="/">
                Ir para a home
            </LinkComp>
            <ul>
                {faq.map(({ answer, question }) => (
                    <li key={question}>
                        <article>
                            <h2>{question}</h2>
                            <p>{answer}</p>
                        </article>
                    </li>
                ))}
            </ul>
        </div>
    )
}
```
2 respostas
por Gabriel Barros
| 75.2k xp | 1 posts

Estou com o mesmo problema, conseguiu resolver? mesmo com Static e ServerSide ele retorna undefined.

por Eurico Cruz
| 111.5k xp | 3 posts
Analista Digital II

Boa tarde pessoal, tudo certo? Eu fiz uma troca aqui das funções getStaticProps e do map que você faz no seu código e coloquei no meu. Funcionou normalmente. Eu vi que tem três acentos no final do código que você colocou, e isso quebra meu código, mas não acredito que esse seja seu problema. Vou compartilhar meu código aqui para ver se você encontra alguma diferença:

import Link from "../src/components/NextLink/NextLink";
import Head from "next/head";

export async function getStaticProps() {
  const FAQ_API_URL =
    "https://gist.githubusercontent.com/omariosouto/0ceab54bdd8182cbd1a4549d32945c1a/raw/578ad1e8e5296fa048e3e7ff6b317f7497b31ad9/alura-cases-faq.json";
  const faq = await fetch(FAQ_API_URL)
    .then((respostaDoServidor) => {
      return respostaDoServidor.json();
    })
    .then((resposta) => {
      return resposta;
    });

  return {
    props: {
      qualquercoisa: "que eu passar aqui",
      faq,
    },
  };
}

export default function FaqPage({ faq }) {
  return (
    <div>
      <Head>
        <title>FAQ - Alura Cases Campanha</title>
      </Head>
      <h1>Alura Cases - Página de Perguntas FAQ</h1>
      <Link href="/">Ir para a Home</Link>
      <ul>
        {faq.map(({ answer, question }) => (
          <li key={question}>
            <article>
              <h2>{question}</h2>
              <p>{answer}</p>
            </article>
          </li>
        ))}
      </ul>
    </div>
  );
}