Не возвращаются данные из API запроса в next js

Question

console log возвращает undefined. Почему может не работать запрос через сервер рендеринг. При обращение через клиент всё работает

export const getStaticProps = async() => {
  const res = await fetch('http://localhost:1337/portfolios');
  const data = await res.json();
  console.log(res)
 
  return { props: { portfolios: data } };
}

const Page = ({ portfolios }) => {
  return (
    <div className="portfolio">
      <div className="container">
        <h2 className="portfolio__header">портфолио</h2>    

        <div className="portfolio__content">
        {
          console.log(typeof portfolios)
        }
        </div>
      </div>
    </div>
  )
};

export default Page;

Answer 1

Я тоже столкнулся с такой проблемой (недавно сел изучать NextJS) У меня это решилось вызовом getStaticProps на уровне страницы (index.js) и прокидывании данных в нужный элемент. Не знаю почему но в самом элементе вызов getStaticProps реально не работает Вообще это странно, мб знающие люди дополнят/объяснят как надо правильно

export async function getStaticProps() {
  const res = await fetch('https://.....');
  const films = await res.json();
  
  return {
      props: { films }
  }
}

/// !!!компонент Favorite это index.tsx - тоесть страница !!!
export default function Favorite({ films }: any) {
  return (
    <>
      <FilmsListPage films={films} />
      </main>
    </>
  )
}

Answer 2

Потому что getStaticProps вызывается только один раз, при создании страницы. Например, при next build, когда статические страницы рендерятся и кэшируются. Для динамических страниц есть getServerProps.

БЛОГ НА HUSL

Не возвращаются данные из API запроса в next js

Ответы (2 шт):