getStaticProps

ページからgetStaticProps（静的サイト生成）という関数をエクスポートすると、Next.jsはビルド時にgetStaticPropsから返されたプロパティを使用してこのページをプリレンダリングします。

import type { InferGetStaticPropsType, GetStaticProps } from 'next'
 
type Repo = {
  name: string
  stargazers_count: number
}
 
export const getStaticProps = (async (context) => {
  const res = await fetch('https://api.github.com/repos/vercel/next.js')
  const repo = await res.json()
  return { props: { repo } }
}) satisfies GetStaticProps<{
  repo: Repo
}>
 
export default function Page({
  repo,
}: InferGetStaticPropsType<typeof getStaticProps>) {
  return repo.stargazers_count
}

レンダリングタイプに関係なく、すべてのpropsはページコンポーネントに渡され、クライアントサイドの初期HTMLで表示できることに注意してください。これは、ページが正しくハイドレートされるようにするためです。クライアントで利用可能にすべきではない機密情報をpropsに渡さないようにしてください。

getStaticProps APIリファレンスでは、getStaticPropsで使用できるすべてのパラメータとプロパティについて説明しています。

getStaticPropsはいつ使用すべきですか？

以下の場合にgetStaticPropsを使用する必要があります

• ページのレンダリングに必要なデータが、ユーザーのリクエストに先立ってビルド時に利用可能な場合
• データがヘッドレスCMSからのものである場合
• ページをプリレンダリング（SEOのため）し、非常に高速にする必要がある場合 - getStaticPropsはHTMLとJSONファイルを生成し、どちらもパフォーマンスのためにCDNによってキャッシュできます
• データを公開キャッシュできる場合（ユーザー固有ではない）。この条件は、ミドルウェアを使用してパスを書き換えることによって、特定の状況では回避できます。

getStaticPropsはいつ実行されますか

getStaticPropsは常にサーバーで実行され、クライアントでは実行されません。 getStaticProps内に記述されたコードがクライアントサイドバンドルから削除されていることをこのツールで検証できます。

• getStaticPropsは、next build中に常に実行されます
• getStaticPropsは、fallback: trueを使用している場合、バックグラウンドで実行されます
• getStaticPropsは、fallback: blockingを使用している場合、初期レンダリング前に呼び出されます
• getStaticPropsは、revalidateを使用している場合、バックグラウンドで実行されます
• getStaticPropsは、revalidate()を使用している場合、オンデマンドでバックグラウンドで実行されます

差分静的再生成と組み合わせると、getStaticPropsは古いページが再検証されている間にバックグラウンドで実行され、新しいページがブラウザに提供されます。

getStaticPropsは、静的HTMLを生成するため、受信リクエスト（クエリパラメータやHTTPヘッダーなど）にアクセスできません。ページのリクエストにアクセスする必要がある場合は、getStaticPropsに加えてミドルウェアの使用を検討してください。

getStaticPropsを使用してCMSからデータを取得する

次の例は、CMSからブログ投稿のリストを取得する方法を示しています。

// posts will be populated at build time by getStaticProps()
export default function Blog({ posts }) {
  return (
    <ul>
      {posts.map((post) => (
        <li>{post.title}</li>
      ))}
    </ul>
  )
}
 
// This function gets called at build time on server-side.
// It won't be called on client-side, so you can even do
// direct database queries.
export async function getStaticProps() {
  // Call an external API endpoint to get posts.
  // You can use any data fetching library
  const res = await fetch('https://.../posts')
  const posts = await res.json()
 
  // By returning { props: { posts } }, the Blog component
  // will receive `posts` as a prop at build time
  return {
    props: {
      posts,
    },
  }
}

getStaticProps APIリファレンスでは、getStaticPropsで使用できるすべてのパラメータとプロパティについて説明しています。

サーバーサイドコードを直接記述する

getStaticPropsはサーバーサイドでのみ実行されるため、クライアントサイドでは実行されません。ブラウザのJSバンドルにも含まれないため、ブラウザに送信されることなく直接データベースクエリを記述できます。

これは、getStaticProps から（外部ソースからデータをフェッチする）APIルートをフェッチする代わりに、サーバーサイドのコードをgetStaticProps に直接記述できることを意味します。

次の例を見てみましょう。APIルートは、CMSからいくつかのデータをフェッチするために使用されます。そのAPIルートは、getStaticProps から直接呼び出されます。これは追加の呼び出しを生成し、パフォーマンスを低下させます。代わりに、CMSからデータをフェッチするロジックは、lib/ ディレクトリを使用することで共有できます。そして、それはgetStaticProps と共有できます。

// The following function is shared
// with getStaticProps and API routes
// from a `lib/` directory
export async function loadPosts() {
  // Call an external API endpoint to get posts
  const res = await fetch('https://.../posts/')
  const data = await res.json()
 
  return data
}

// pages/blog.js
import { loadPosts } from '../lib/load-posts'
 
// This function runs only on the server side
export async function getStaticProps() {
  // Instead of fetching your `/api` route you can call the same
  // function directly in `getStaticProps`
  const posts = await loadPosts()
 
  // Props returned will be passed to the page component
  return { props: { posts } }
}

あるいは、データをフェッチするためにAPIルートを使用していない場合は、fetch() API をgetStaticProps で直接使用してデータをフェッチできます。

Next.jsがクライアントサイドバンドルから何を削除するかを確認するには、next-code-eliminationツールを使用できます。

HTMLとJSONの両方を静的に生成します

getStaticProps を持つページがビルド時にプリレンダリングされると、ページのHTMLファイルに加えて、Next.jsはgetStaticPropsの実行結果を保持するJSONファイルを生成します。

このJSONファイルは、next/linkまたはnext/routerを介したクライアントサイドルーティングで使用されます。 getStaticPropsを使用してプリレンダリングされたページに移動すると、Next.jsはこのJSONファイル（ビルド時に事前計算済み）をフェッチし、ページコンポーネントのプロパティとして使用します。これは、エクスポートされたJSONのみが使用されるため、クライアントサイドのページ遷移ではgetStaticPropsが呼び出されないことを意味します。

増分静的生成を使用する場合、getStaticPropsはバックグラウンドで実行され、クライアントサイドナビゲーションに必要なJSONが生成されます。これは、同じページに対して複数のリクエストが行われる形式で見られる場合がありますが、これは意図的なものであり、エンドユーザーのパフォーマンスには影響しません。

getStaticPropsはどこで使用できますか

getStaticProps は、ページからのみエクスポートできます。ページ以外のファイル、_app、_document、または_errorからはエクスポートできません。

この制限の理由の1つは、Reactがページをレンダリングする前に必要なすべてのデータを持っている必要があることです。

また、getStaticPropsはスタンドアロン関数としてエクスポートする必要があります。ページコンポーネントのプロパティとしてgetStaticPropsを追加しても機能しません。

知っておくと良いこと：カスタムアプリを作成した場合は、リンク先のドキュメントに示されているように、pagePropsをページコンポーネントに渡していることを確認してください。そうでない場合、プロパティは空になります。

開発中はすべてのリクエストで実行されますプレビューモードを使用して、静的生成を一時的にバイパスし、ビルド時ではなくリクエスト時にページをレンダリングできます。たとえば、ヘッドレスCMSを使用していて、公開前にドラフトをプレビューしたい場合があります。