Next.jsを少しずつ理解していく8【getStaticProps】

9月 9, 2022

今回はNext.jsのgetStaticProps関数について紹介します。getStaticProps関数はNext.jsの中でもよく利用される関数の1つなので、しっかり使い方を覚えておきましょう。

Next.jsのgetStaticPropsとは

Next.jsのgetStaticProps関数を利用すると、ページを事前レンダリングする際に、getStaticProps関数によって返されたpropsを使用することができます。

getStaticProps関数はページをレンダリングするために必要なデータ（例：ブログ記事の一覧データなど）を取得したい場合などによく使われます。

getStaticPropsでデータを取得・表示してみよう

では実際にgetStaticPropsを使ってデータをフェッチし、取得したデータをpropsとして渡してHTMLに表示してみましょう。

まずはpagesディレクトリの中にusers.jsファイルを作成します。

Terminal

touch pages/users.js

pages/users.js

function UserList() {
    return <h1>List of users</h1>
}

export default UserList

npm run devでNext.jsサーバーを起動し、localhost:3000/usersにアクセスすると「List of users」と表示されるはずです。

続いてはgetStaticProps関数を定義しその中でfetchメソッドを用いてデータを取得します。今回は「JSONPlaceholder」というサービスが公開しているデータを取得します。JSONPlaceholderはテストやプロトタイピング用の偽のAPIを提供するサービスです。

先ほど作成したusers.jsファイルを次のように変更します。

pages/users.js

function UserList() {
    return <h1>List of users</h1>
}

export default UserList

export async function getStaticProps() {
    const res = await fetch('https://jsonplaceholder.typicode.com/users')
    const data = await res.json()
    console.log(data)
}

fetchメソッドで取得したデータをres.json()でJavaScriptオブジェクトに変換して表示します。users.jsの変更を反映させると、ブラウザではなくエディター（Xcodeなど）のTerminalに取得したデータが表示されます。これは、getStaticProps関数がUserList()に対してまだpropsを渡していないためです。

propsを渡さないと、getStaticProps関数で取得したデータがビルド時に（開発サーバーではビルドは不要だが）静的ページに反映されません。また、ブラウザを確認すると分かりますが「getStaticProps関数がオブジェクトを返していません」という旨のエラーが表示されます。

users.jsを次のように変更して、getStaticProps関数で取得したデータをUserList()で受け取り表示できるようにします。

pages/users.js

//users propsを受け取る
function UserList({ users }) {
    return(
        <>
        <h1>List of users</h1>
        //取得したデータを表示
        {users.map((user) => {
            return(
                <div key={user.id}>
                    <p>{user.name}</p>
                    <p>{user.email}</p>
                    <br></br>
                </div>
            )
        })}
        </>
    )
}

export default UserList

export async function getStaticProps() {
    const res = await fetch('https://jsonplaceholder.typicode.com/users')
    const data = await res.json()
    
    return{
        props: {
            //usersという名前propsに、上述のdataを格納
            users: data,
        },
    }
}

return{}の中でprops:{xxx}を記述するとxxxの内容がpropsとしてページコンポーネント（今回はUserList()）に渡すことができます。

また、return{}の中にはpropsの他にrevalidate、notFound、redirectなどを設定できます。詳しくは公式ドキュメントを参照ください。

Data Fetching:getStaticProps｜Next.js

fetchとは？

fetchメソッド(Fetch API）とは、リソース取得のためのインターフェースです。詳しくは別記事で解説予定です。

async/awaitとは？

詳しくは別記事で解説予定です。

改めてブラウザを見てみると取得したデータが表示されていることを確認できます。ページのソースを確認すると取得したデータが表示されており、ビルド時、事前レンダリングを行う前に取得したデータが読み込まれて反映されていることが分かります。

getStaticProps関数の決まりごと

getStaticProps関数を扱う上で知っておいてた方が良い重要な決まり事をいくつか紹介します。

1．サーバーサイドで実行される

getStaticProps関数は必ずサーバーサイドで実行されます。クライアントサイドで動くことはありません。getStaticProps関数に記述したコードは、ブラウザに送られるJS bundleにも含まれることはありません。

2．サーバーサイドの処理を記述できる

getStaticProps関数はサーバーサイドで実行されるため、サーバーサイドの処理を直接記述することができます。例えばfsモジュールを使用したファイルの読み書きや、データベースのクエリ操作などもgetStaticProps関数内で行うことが可能です。

また既述の通り、getStaticProps関数内に記述したコードはクライアント（ブラウザ）に送信されないため、APIキーなどを含めても問題ありません。

ただしreturn{}内に記述したpropsのデータはクライアントに送信されてしまうため、APIキーなどの機密情報を含めないように注意が必要です。

3．pageファイルのみで利用できる

getStatiProps関数はpageファイルのみで利用できます。pageファイルとはpageフォルダ内に格納されているファイルのことです。

よって、例えば通常のcomponentファイルからは利用できません。

componentとは？

componentはpageを構成する部品のようなもので、pageフォルダとは別にフォルダを用意し（通常はcomponentと命名）その中にcomponentファイルを作成する必要があります。詳細は今後学習しますが、componentファイルはpageファイルから呼び出され、UIの一部として機能します。

pre-rendering
∟component
∟∟user.js←これがcomponetファイル
∟pages
∟public
......

propsを返さないといけない

既述の通りですが、getStaticProps関数は必ずprops keyを含んだオブジェクトを返さなければいけません。

また、propsとして返す値もjsオブジェクトでなければなりません。下の例で言えばdata定数がjsオブジェクトである必要があります。（fetchして返ってきたJSONデータをres.json()でjsオブジェクトに変換しているのはそのため）

export async function getStaticProps() {
    const res = await fetch('https://jsonplaceholder.typicode.com/users')
    const data = await res.json()
    //propsを含んだjsオブジェクトを返さないといけない
    return{
        props: {
            users: data,
        },
    }
}