getStaticProps を使用すると、取得したデータが Next.js で未定義になるのはなぜですか?

getStaticProps を使用した Next.js データ取得のトラブルシューティング

Next.js アプリケーションに getStaticProps メソッドを実装しているにもかかわらず、次の問題が発生しています。フェッチされたデータは未定義です。この問題はファイル構造に関連している可能性が高く、次のガイダンスでこの問題に対処します。

サーバー コンポーネント

Next.js の最近のバージョンでは、ページ コンポーネントは次のとおりです。ページ フォルダー (ルートを設定する従来の方法) は、サーバー側のデータ取得にサーバー コンポーネントを利用します。

データアプリ ディレクトリ内での取得

アプリ ディレクトリに移行した後 (Next.js 13 で推奨されるアプローチ)、サーバー コンポーネントを利用してコンポーネント本体内でデータを直接取得できます。これは、提供されたコード スニペットに示されているように、具体的なガイダンスのコメントとともに実行されます。

リクエスト Cookie とヘッダーのインポート

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() を省略し、ライブラリまたは ORM を使用してデータに直接アクセスできます。このシナリオでは、以下のコードに示すように、ルート セグメント構成を利用できます。

// 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 中国語 Web サイトの他の関連記事を参照してください。