Open1

【React Next】ダイナミックルートと、getStaticProps, getStaticPathsについての学び

yu.miyoshiyu.miyoshi

概要

ダイナミックルートについて学んだことの共有

https://nextjs.org/docs/routing/dynamic-routes
Next.jsでは、pages内でファイル名に[]を使用することで自動的にダイナミックルート対象となる。

例)pages/edit/[id].tsx
ダイナミックルート用のファイルでは、getStaticPathsとgetStaticPropsの関数が必要です。

  • getStaticPaths:ビルド時にレンダリングする必要のあるパスのリストを生成する
  • getStaticProps:ビルド時に静的なファイルを生成し、ページコンポーネントで使用する値を用意する

※ これらの関数はクライアント側での実行でなく、必ずサーバーサイドで実行される。

import Link from 'next/link'

// post:getStaticPropsから取得したデータ
export default ({ post }) => {
  return (
    <div>
      <h1>{post.title}</h1>
      <p>{post.body}</p>
      <Link href="/">
        <a>Back</a>
      </Link>
    </div>
  )
}

export const getStaticPaths = async () => {
  // 外部APIエンドポイントを呼び出しデータ取得
  const res = await fetch("https://jsonplaceholder.typicode.com/posts")
  const posts = await res.json()  

  // 事前ビルドしたいパスを指定
  const paths = posts.map((post) => ({
    params: {
      // ファイル名と合わせる ※文字列指定
      id: post.id.toString(),
    },
  }))
  // paths:事前ビルドするパス対象を指定するパラメータ
  // fallback:事前ビルドしたパス以外にアクセスしたときのパラメータ true:カスタム404Pageを表示 false:404pageを表示
  return { paths, fallback: false }
}

// paramsには上記pathsで指定した値が入る(1postずつ)
export const getStaticProps = async ({ params }) => {  
  // 外部APIエンドポイントを呼び出しデータ取得
  const res = await fetch(`https://jsonplaceholder.typicode.com/posts/${params.id}`)
  const post = await res.json()  

  // ページコンポーネントにpropsとしてに渡す
  return {
    props: {
      post
    },
  }
}

画面表示までの流れ

  1. getStaticPathsで、レンダリングする必要のあるパスのリストを生成する
  2. getStaticPropsで、1で生成したパスのリストから1postsずつAPIエンドポイントを呼び出しデータを取得する
  3. ページコンポーネントがgetStaticPropsからデータを受け取り、画面に表示される

今後追加で学びたいこと

getStaticPaths内でグローバルなステートを呼び出す方法

DOM構築前にダイナミックルーティングでidを取得し、propsにわたす処理をしたい

参考サイト

https://qiita.com/matamatanot/items/1735984f40540b8bdf91

https://laptrinhx.com/next-jsnodainamikkurutinguwo-shi-zhuangshitemita-3644502177/

https://reffect.co.jp/react/next-js#getStaticPaths