Closed2

【Next.js】SSGについて

Next.js
ピン留めされたアイテム
kaitokaito

SSGの特徴と使用例

SSGとは

  • Static Site Generation の略称
  • 日本語に直訳すると「静的サイト生成」
  • アプリケーションのビルド時に静的な HTML ファイルを生成する
  • Next.js では getStaticProps という関数を使う

SSGの特徴

  • 特定のサーバーサイド処理を必要とせず、リクエストに対してビルド時に生成された静的ファイルを返す
  • 更新頻度が低く、ユーザーごとに動的な変化がないような静的なコンテンツに向いている
  • サーバーは静的ファイルを直接配信するだけなのでロード時間が早い

getStaticProps の処理の流れ

1. next build を実行

  • ビルド時にサーバーサイドで getStaticProps が実行され、外部のAPIやデータベースから必要なデータを取得する

2. 静的ページを生成

  • getStaticProps は取得したデータを props オブジェクトに格納し、props をページコンポーネントに渡す
  • ページコンポーネントは渡された props を使用してレンダリングし、HTMLファイルが生成される

3. リクエスト時

  • クライアントがページをリクエストすると、Next.js はサーバーから事前に生成された静的HTMLファイルを返す

使用例

JSONPlaceholderのAPIから記事データを取得し、記事リストを生成する

import Head from "next/head";
import Link from "next/link";
import { GetStaticProps, InferGetStaticPropsType } from 'next';

interface Post {
  userId: number;
  id: number;
  title: string;
  body: string;
}

export const getStaticProps = (async () => {
  const res: Response = await fetch('https://jsonplaceholder.typicode.com/posts');
  const posts = await res.json();

  return { props: { posts } };
}) satisfies GetStaticProps<{ posts: Post[] }>;

export default function Blogs({
  posts,
}: InferGetStaticPropsType<typeof getStaticProps>) {
  return (
    <>
      <Head>
        <title>記事リスト</title>
      </Head>
      <h1>記事リスト</h1>
      <ul>
        {posts.map((post) => (
          <li key={post.id}>
            <Link href={`blogs/${post.id}`}>{post.title}</Link>
          </li>
        ))}
      </ul>
    </>
  );
}

getStaticProps関数の内部で何をしているのか

export const getStaticProps = (async () => {
  const res: Response = await fetch('https://jsonplaceholder.typicode.com/posts');
  const posts: Post[] = await res.json();

  return { props: { posts } };
}) satisfies GetStaticProps<{ posts: Post[] }>;

まず、fetch関数を使って、APIから記事データを取得し、
次に、APIから取得したデータをJSON形式に変換している。
そして最後に、propsオブジェクトを返している

自分がgetStaticProps関数でつまづいたところ

エラー箇所
getStaticPropsが返しているオブジェクトがどのようなものなのかを理解しておらず、以下のようにpropsプロパティに直接postsを持たせてしまいエラーを起こしていた。

return { props: posts };

エラー原因
getStaticProps は props プロパティを持つオブジェクトを返す必要があり、
上記の記述だとpropsプロパティにpostsという配列を持たせているためエラーとなる。

具体的に見てみると、postsは以下のような配列であり、

const posts: Post[]= [
  { id: 1, title: "Post 1" },
  { id: 2, title: "Post 2" }
];

postsというプロパティ名にposts配列を持つオブジェクトを返したい場合、以下のようにオブジェクトを入れ子にする必要がある。

return { props: { posts: posts } };

ただし、JavaScriptおよびTypeScriptでは、オブジェクトリテラルのプロパティ名とその変数名が同じ場合、短縮記法を使うことができるため、以下のような短縮記法が使われる。

return { props: { posts } };

短縮記法に慣れていないと使われていることにすら気づかずに、つまづいてしまうことがあるので短縮記法も積極的に使っていきたい。

このスクラップは3ヶ月前にクローズされました