最近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`)
よろしくお願いします。