最新の Next.js アプリ ディレクトリで「getStaticProps」が実行されず、未定義を返すのはなぜですか?

最新の Next.js で getStaticProps が実行されず、未定義を返す

問題の説明

で getStaticProps を使用して API エンドポイントからデータを取得しようとするとNext.js の最新バージョンでは、関数が実行されず、返されるデータが未定義であるという問題が発生します。これにより、未定義のプロパティを読み取ることができないため、データをマッピングするときにエラーが発生します。

解決策

getStaticProps はサーバー上のデータをフェッチするために使用されますが、これは、ページ フォルダー。これは、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 中国語 Web サイトの他の関連記事を参照してください。