Блог

Я использую NextJS getStaticProps для извлечения некоторых данных из внешнего API. Читая документацию по выборке данных в getStaticProps, я наткнулся на эту конкретную заметку:

Примечание: вы не должны использовать fetch() для вызова маршрута API в вашем приложении. Вместо этого напрямую импортируйте маршрут API и вызывайте его функцию самостоятельно. Возможно, вам потребуется немного реорганизовать свой код для этого подхода.

Прямо сейчас я вызываю getStaticProps непосредственно из компонента страницы, который называется Index следующим образом:

 export default function Index({ data }) {
  return <div>{data}</div>;
}

export async function getStaticProps() {
  const response = await fetch("http://127.0.0.1:8000/data");
  const data = await response.json();
  return { props: { data } };
}
  

Согласно приведенной выше документации, этого делать не следует. Как я могу реструктурировать свой код для правильной выборки данных? Что значит «импортировать маршрут API и вызывать его функцию самостоятельно?»

Я думаю, что примечание связано с внутренним путем api

Вы не должны использовать fetch() для вызова маршрута API в вашем приложении

Я полагаю, это связано с каждым путем, который вы определяете /pages/api/* . Вместо fetch этого вы можете просто реорганизовать свой код и импортировать данные.

Итак, приведенный ниже код правильный, не нуждается в рефакторинге

 export default function Index({ data }) {
  return <div>{data}</div>;
}

export async function getStaticProps() {
  const response = await fetch("http://127.0.0.1:8000/data");
  const data = await response.json();
  return { props: { data } };
}