0

最近Next.jsを個人で触り始め、現在Next.js Ver9.3.5でネストした動的ルーティングを実装しようとしています。

やりたいこと

やりたいことは /tokyo/shinjuku/ のようなページでの getStaticPathsの動的な実装です。
フォルダ構造は以下のようです。
[prefecture_name_e]/index.jsでは動的である必要がなかったため[prefecture_name_e]/[city_name_e]/index.jsで getStaticPathsの動的な実装を行おうとしています。

$ tree pages/
pages/
├── [prefecture_name_e]
│   ├── [city_name_e]
│   │   └── index.js
│   └── index.js
├── _app.js
└── index.js

実現のためやってみたこと

[prefecture_name_e]/[city_name_e]/index.js ファイルにて getStaticPathsの実装を以下のようにやろうとしました。 getStaticProps({ params })と同じようにParamsを使ってみました。

export async function getStaticPaths({params}) {
  // その都道府県の市区町村一覧を取得します
  const res = await fetch(`${process.env.apiHost}/prefectures/${params.prefecture_name_e}/cities`)
  const json = await res.json()
  const cities = json.cities
  const prefecture = json.prefecture

  const paths = cities.map((city) => ({
    params: {
      prefecture_name_e: prefecture.name_e,
      city_name_e: city.name_e,
    },
  }))

  return { paths, fallback: true }
}

が以下のようなエラーになりました。

TypeError: Cannot destructure property `params` of 'undefined' or 'null'.

代替手段

そのため代替手段として以下のように、動的ではなく/tokyo のルーティングだけを取得する実装に変更することで、動かすことはできるようになりました。

export async function getStaticPaths() {
  // 東京の市区町村一覧を取得します
  const res = await fetch(`${process.env.apiHost}/prefectures/tokyo/cities`)
  const json = await res.json()
  const cities = json.cities
  const prefecture = json.prefecture

  const paths = cities.map((city) => ({
    params: {
      prefecture_name_e: prefecture.name_e,
      city_name_e: city.name_e,
    },
  }))

  return { paths, fallback: true }
}

質問

getStaticPaths内でも以下のようにParamsを用いながら取得する手段、
またはそれに代わるようなgetStaticPaths内で動的に値を取得する方法、
一般的なgetStaticPathsと先に書いたコードとの違いを知れればと思い質問を投稿しました。

const res = await fetch(`${process.env.apiHost}/prefectures/${params.prefecture_name_e}/cities`)

よろしくお願いします。

1 件の回答 1

1

getStaticPaths の役割を勘違いしているように思います。
getStaticPaths は next export コマンドで静的サイトとしてアプリを出力する場合に使うもので、URL の可変部分(この例でいうと [prefecture_name_e], [city_name_e] の部分)のバリエーションを Next.js に伝えるためのものです。

Next.js は getStaticPaths の結果を受けて、そのバリエーション分の html ファイルを生成します。
params に当たる値のバリエーションをあなたに要求している関数なので受け取ることはできません。

今回の場合だと [city_name_e] は API で取得できるようになっているみたいなので、同じく [prefecture_name_e] の一覧も取得できる API を実装してループさせる感じのイメージになるんじゃないかと思います。

4
  • ありがとうございます!> params に当たる値のバリエーションをあなたに要求している関数 ということで役割について理解しました!このバリエーションが例えば、100万通りなど多くある場合は、すべてをExportするのはふさわしくなく、一部のバリエーションのみエクスポートしその他はfallback: trueなどを行うのが適切でしょうか?
    – hatsu
    Commented 2020年10月7日 5:29
  • 100万通りは無理だと思います。自分は今2万ぐらいので試していますが、それでもちょっと待ちます。
    – toy
    Commented 2020年10月7日 10:14
  • 自分は Node.js が動かないレンタルサーバで動かすことを目的にしていて SSG のために getStaticProps / getStaticPaths を使っていますが、そうでないなら getServerSideProps を使うのが良いのではないでしょうか?
    – toy
    Commented 2020年10月7日 10:17
  • ここを読むと良いと思います。 nextjs.org/docs/basic-features/pages
    – toy
    Commented 2020年10月7日 10:17

この質問に回答するには、ログインする必要があります。

求めていた回答ではありませんか? のタグが付いた他の質問を参照する。