최신 Next.js 앱 디렉토리에서 `getStaticProps`가 실행되고 정의되지 않은 상태로 반환되지 않는 이유는 무엇입니까?

getStaticProps가 실행되지 않고 최신 Next.js에서 정의되지 않은 값을 반환합니다.

문제 설명

getStaticProps를 사용하여 API 끝점에서 데이터를 가져오려고 할 때 최신 버전의 Next.js에서는 함수가 실행되지 않고 반환된 데이터가 정의되지 않는 문제가 발생합니다. 이로 인해 정의되지 않은 속성을 읽을 수 없기 때문에 데이터를 매핑할 때 오류가 발생합니다.

해결책

getStaticProps는 서버에서 데이터를 가져오는 데 사용되지만, 서버 내의 페이지 구성 요소에만 적용 가능합니다. Pages 폴더는 Next.js에서 경로를 설정하는 전통적인 방법입니다.

앱 디렉토리를 사용하는 최신 Next.js 애플리케이션에서 서버 구성 요소는 보다 유연한 경로를 제공합니다. 데이터 가져오기에 대한 접근 방식입니다. 다음은 구성 요소 본문에서 데이터를 직접 가져오는 방법을 보여주는 코드 조각입니다.

import { cookies, headers } from "next/headers";

export default async function Component({ params, searchParams }) {
  const staticData = await fetch("https://...", { cache: "force-cache" });
  const dynamicData = await fetch("https://...", { cache: "no-store" });
  const revalidatedData = await fetch("https://...", { next: { revalidate: 10 } });

  return "...";
}

이 코드를 사용하면 강제 캐싱, 캐싱 없음 또는 재검증을 포함하여 가져온 데이터의 캐싱 동작을 제어할 수 있습니다. 지정된 기간.

또는 fetch()를 사용하지 않고 데이터를 가져올 수도 있습니다. 타사 라이브러리를 사용하거나 ORM으로 데이터베이스를 직접 쿼리하세요. 이 경우 경로 세그먼트 구성을 사용할 수 있습니다.

async function getPosts() {
  const posts = await prisma.post.findMany();
  return posts;
}

export default async function Page() {
  const posts = await getPosts();
  // ...
}

이 접근 방식을 사용하면 revalidate 속성을 통해 가져온 데이터의 캐싱 동작을 지정하거나 동적 속성을 사용하여 캐싱을 완전히 비활성화할 수 있습니다.

위 내용은 최신 Next.js 앱 디렉토리에서 `getStaticProps`가 실행되고 정의되지 않은 상태로 반환되지 않는 이유는 무엇입니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!