getStaticProps를 사용할 때 가져온 데이터가 Next.js에서 정의되지 않은 이유는 무엇입니까?

getStaticProps를 사용한 Next.js 데이터 가져오기 문제 해결

Next.js 애플리케이션에서 getStaticProps 메서드를 구현했음에도 불구하고 다음과 같은 문제가 발생합니다. 가져온 데이터가 정의되지 않았습니다. 문제는 파일 구조와 관련이 있을 수 있으며 다음 지침에 따라 이 문제를 해결할 수 있습니다.

서버 구성 요소

최신 버전의 Next.js에서 페이지 구성 요소는 페이지 폴더(경로 설정의 기존 방법)는 서버측 데이터 가져오기를 위해 서버 구성요소를 활용합니다.

앱 디렉토리 내 데이터 가져오기

앱으로 전환한 후 디렉터리(Next.js 13에서 선호되는 접근 방식)를 사용하면 서버 구성 요소를 활용하여 구성 요소 본문 내에서 직접 데이터를 검색할 수 있습니다. 이는 지침에 대한 구체적인 설명과 함께 제공된 코드 조각에 설명된 대로 수행됩니다.

요청 쿠키 및 헤더 가져오기

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

다음을 기반으로 데이터 가져오기 캐싱 옵션

// Force caching until manually invalidated, similar to getStaticProps
const staticData = await fetch(`https://...`, { cache: "force-cache" });

// Refetch on every request, similar to getServerSideProps
const dynamicData = await fetch(`https://...`, { cache: "no-store" });

// Cache with a lifespan of 10 seconds, similar to getStaticProps with revalidate
const revalidatedData = await fetch(`https://...`, {
  next: { revalidate: 10 },
});

Fetch가 아닌 데이터 요청

fetch()를 생략하고 라이브러리나 ORM을 사용하여 데이터에 직접 액세스할 수 있습니다. 이 시나리오에서는 아래 코드에 설명된 대로 Route Segment Config를 활용할 수 있습니다.

// revalidate every 10 seconds
export const revalidate = 10;

// no caching
export const dynamic = "force-dynamic";

Prisma와의 데이터베이스 상호 작용

import prisma from "./lib/prisma";

const posts = await prisma.post.findMany();

다음 사항을 준수하세요. 권장 사항을 따르면 파일 구조나 사용하는 데이터 가져오기 방법에 관계없이 Next.js 애플리케이션에서 데이터를 효과적으로 가져올 수 있습니다.

위 내용은 getStaticProps를 사용할 때 가져온 데이터가 Next.js에서 정의되지 않은 이유는 무엇입니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!