getStaticProps

getStaticProps を分かりやすく？

「getStaticProps」とは、「静的サイト生成（SSG）」を実現するための、Next.js の機能の 1 つです。この機能は、Next.js や TypeScript を使った Web 開発において、動的なコンテンツを含む Web ページを生成するために重要な役割を果たしています。

あなたが、自分のブログの Web サイトを作りたいと思っているとします。ブログのコンテンツは、記事のタイトルと本文が含まれる HTML ページの集合です。このようなサイトを作るために、静的サイト生成と getStaticProps を利用することができます。

posts.ts に記事のデータを定義する

具体的には、まず、TypeScript と Next.js を使って、ブログの記事のデータを配列で定義します。以下は、posts.tsというファイルに記事のデータを定義する例です。

export const posts = [
  {
    id: 'post1',
    title: 'はじめてのブログ',
    content: 'これは、はじめて書いたブログです。',
  },
  {
    id: 'post2',
    title: '2回目のブログ',
    content: 'これは、2回目に書いたブログです。',
  },
  {
    id: 'post3',
    title: '3回目のブログ',
    content: 'これは、3回目に書いたブログです。',
  },
  // 以下、ブログ記事のデータが続く
]

GetStaticPaths型とGetStaticProps型

次に、このデータをもとに、各記事の HTML ページを生成します。ここで、getStaticProps を利用すると、動的なコンテンツを含む Web ページを一括で生成することができます。以下は、pages/posts/[id].tsxというファイルに、getStaticProps と HTML ページの生成のためのコードを記述した例です。

import { GetStaticPaths, GetStaticProps } from 'next'
import { posts } from '../../posts'

type Post = {
  id: string
  title: string
  content: string
}

type PostProps = {
  post: Post
}

export default function Post({ post }: PostProps) {
  return (
    <div>
      <h1>{post.title}</h1>
      <p>{post.content}</p>
    </div>
  )
}

export const getStaticPaths: GetStaticPaths = async () => {
  const paths = posts.map((post) => ({
    params: { id: post.id },
  }))
  return { paths, fallback: false }
}

export const getStaticProps: GetStaticProps<PostProps> = async ({ params }) => {
  const post = posts.find((post) => post.id === params?.id)
  if (!post) {
    return { notFound: true }
  }
  return { props: { post } }
}

上述したコードでは、GetStaticPaths型とGetStaticProps型を使って、getStaticProps と getStaticPaths の 2 つの関数を定義しています。

getStaticPaths関数では、pathsという変数に、各記事の ID をもとに生成したパスを配列で格納しています。fallbackにはfalseを指定しているため、存在しないパスにアクセスされた場合は 404 ページを表示するようになっています。

getStaticProps関数では、パラメーターとして渡された記事の ID をもとに、該当する記事を検索しています。もし該当する記事が存在しない場合は、notFound: trueを返して、404 ページを表示します。記事が存在する場合は、propsに記事のデータを格納して返します。

最後に、各記事の HTML ページを生成するためのコードを書きます。以下は、pages/posts/[id].tsxファイルに記述したコードの続きです。

export default function Post({ post }: PostProps) {
  return (
    <div>
      <h1>{post.title}</h1>
      <p>{post.content}</p>
    </div>
  )
}

このコードでは、getStaticProps で取得した記事のデータを、Postコンポーネントのpostというプロパティに渡しています。postを使って、記事のタイトルと本文を画面に表示することができます。

Next.js 13 の新機能 Data Fetching

Next.js 13 の新機能として、React Suspense を利用した app/ディレクトリでは、getStaticProps や getServerSideProps といったこれまでの Next.js API を置き換える新しい usehook が導入されています。この新しい方法を利用すると、データをフェッチすることができます。以下は、getStaticProps の代わりに fetchData 関数を使用する例です。

//app/page.tsx
async function fetchData() {
  const response = await fetch('https://...`)
  const data = await response.json()

  return data
}

export default function Page() {
  const data = fetchData()

  return <div>{data}</div>
}

以上のように、Next.js と TypeScript を使った getStaticProps の例を紹介しました。このように、getStaticProps を利用することで、動的なコンテンツを含む Web ページを静的サイト生成することができます。