Next.jsチュートリアル備忘録：Dynamic Routes

Dynamic Routes

pages/配下のファイル名を[name].jsのように角かっこで囲むことでURLのパスの値を取得して、ページの内容を変更することができます。(url slugs, pretty urls等とも呼ばれるらしい)

getStaticPaths()

getStaticPath()を使うことでパスのリストを事前に定義しておくことができます。
ここで定義されたURLのページはビルド時に静的レンダリングが行われます。

[name].js

...
export async function getStaticPaths() {
  return {
    paths: [
      { params: { name: 'taro' } },
      { params: { name: 'hanako' } }
    ],
    fallback: true // false or 'blocking'
  };
}
...

getStaticPath()ではparamsキーとパスの情報をもつオブジェクトを持つオブジェクトの配列(paths)を返す必要があります。
この例だと/taroや/hanakoのパスでそれぞれに対応したページを表示することができます。

また、fallbackプロパティではgetStaticPath()で定義されていないパスへのリクエストがあった場合の処理を指定します

• true: 初回のリクエストでは、fallbackページを表示します。その間、サーバーサイドではリクエストパスに基づいたページの生成が行われます。そして、2回目以降のリクエストでは1回目のリクエスト時に生成されたページを表示します。fallbackページは下記の例のようにrouter.isFallbackで判定し、表示します
• false:404を返す
• blocking:trueの場合と似ていますが、こちらはfallbackページを表示しません。初回のリクエスト時からサーバーサイドでレンダリングしてページを表示します。そのため、初回リクエスト時のレスポンスはtrueの場合に比べて遅くなります。

fallback

// pages/posts/[id].js
import { useRouter } from 'next/router'

function Post({ post }) {
  const router = useRouter()

  // If the page is not yet generated, this will be displayed
  // initially until getStaticProps() finishes running
  if (router.isFallback) {
    return <div>Loading...</div>
  }

  // Render post...
}
// This function gets called at build time
export async function getStaticPaths() {
  return {
    paths: [{ params:{}}],
    fallback: true,
  }
}

getStaticProps()

getStaticPaths()は必ずgetStaticProps()と共に使用します。
※getServerSideProps()と共に使用することはできません。(getStaticPaths()は静的レンダリングのための関数のため)
getStaticProps()は引数としてgetStaticPaths()で定義したパス(params)を受け取ります。
またコンポーネントのpropsを返します。

export async function getStaticProps({ params }) {
  return {
    props: {
      data,
    },
}