はじめに

getStaticPropsを理解する上でSSGという概念を知っておくと内容が頭に入りやすいと思うので最初にSSGについて説明します(既にご存知の方は飛ばしていただいても構いません)。

SSGとは

SSGとはStatic Site Generationの略で、この技術を利用することで高速なレンダリングを実現できます。

なぜ高速なのか

レンダリングに関する技術として他にCSRやSSRといった技術があります。
この2つはユーザがウェブサイトにアクセスしてから様々な部品をまとめて1つのHTMLファイルを生成し、ページを表示します。

それに対してSSGはサイトのビルド時にHTMLファイルを事前に生成しておくため、サイトにアクセスしたユーザへ生成済みのHTMLファイルを渡すだけで済みます。
そのため、サイトにアクセスしてからHTMLファイルを生成する手間がなく、高速なレンダリングが可能となります。

SSGを利用するためには

SSGは事前にHTMLファイルを用意する必要があるため、生成時に必要なデータを前もって決めておく必要があります。
そこで使用するのがgetStaticPropsです。

getStaticPropsについて

getStaticPropsについてはHTMLファイルを事前生成する際に必要なデータを決めておくものと考えるとイメージがしやすいかと思います。

実際のコード

getStaticPropsは関数として定義して使用します。

下記にはページコンポーネントとしてPageを定義し、HTML生成に必要なデータ(props)をgetStaticPropsから受け取っています。

const Page = (props) => {
    return (
        <>
            <h1>{ props.title }</h1>
            <p>{ props.description }</p>
        </>
    )
}

export default Page;

props内にページで扱いたいデータを記述し、ページコンポーネントへpropsを渡します。

export const getStaticProps = async () => {
    return {
        props: {
            // ページコンポーネントに渡したいものを記述
            title: "タイトル",
            description: "説明です。"
        }
    }
}

これをビルドすることでh1タグの中には「タイトル」が入り、pタグには「説明です。」が入ったHTMLファイルを生成できます。

ちなみに開発環境ではnpm run dev後、ページにアクセスすると自動的にページをビルドしてくれます。

ただ、上記のコードを見ると「だったら直接タグの中に記述した方が良くない？」と思った方もいらっしゃるかと思います。

その通りです。
ではこのgetStaticPropsの実力が発揮される時はどんな時なのか。

それは、外部データを取得してページ内で扱いたい時です。

一般的な使用方法

外部データを持ってくる関数として新たにgetArticleDataを作成しました。

以下のようにしてデータを持ってきていますが、データフェッチングをした経験がない方は少々ややこしく感じてしまうかもしれません。

ここで大切なのはgetStaticPropsのpropsへJSONを入れているということなので「getArticleDataは外部から持ってきたJSONをgetStaticPropsのarticleに渡してるんだな〜」くらいの認識で大丈夫です。

import axios from "axios";// インストールも忘れずに

const getArticleData = async () => {
    const res = await axios({
        method: "GET",
        url: "https://hoge.com/article",// データを取得するサイトのURL
    })
    // エラー処理等はお好みで
    const article = await res.data;
    return article;
}
const Page = (props) => {
    return (
        <>
            <h1>{ props.article.title }</h1>
            <p>{ props.article.description }</p>
        </>
    )
}
export const getStaticProps = async () => {
    const article = await getArticleData();// 外部データを取得しそれをreturnする関数
    return {
        props: {
            article
        }
    }
}

getArticleDataで行った外部データの取得からHTMLの生成までビルド時に実行されるため、サイトアクセス時に外部からデータを取得して、次にページを生成して....なんて手間がなくなるわけですね。

JSONについて

JSONについて初めて耳にした方向けに簡単にまとめてみました。

外部とデータのやり取りを行う際には一般的にJSON(JavaScript Object Notation)と呼ばれるものを使います。
getArticleDataではaxiosと呼ばれるJavaScriptのライブラリを使用して以下のようなJSONデータを取得しています。

{
    "title": "タイトル",
    "description": "記事説明です。"
}

おわりに

いかがだったでしょうか。

Next.jsにはgetStaticPropsの他にgetStaticPathsという便利な関数も用意されているので気になった方はこちらもぜひご覧ください。
[入門]Next.jsのgetStaticPathsについて

最後までご覧くださりありがとうございました。