70967


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

## やりたいこと

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

[code]

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

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

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

[code]

    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 }
    }
    
[/code]

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

[code]

    TypeError: Cannot destructure property `params` of 'undefined' or 'null'.
    
[/code]

## 代替手段

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

[code]

    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 }
    }
    
[/code]

## 質問

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

[code]

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

よろしくお願いします。


CC BY-SA 4.0
2020-08-23T10:21:54.740
69802
2020-11-10T09:49:05.783
2020-11-10T09:49:05.783
32986
40498
question
reactjs next.js
Next.jsのgetStaticPaths内でParamsを参照できますでしょうか


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 を実装してループさせる感じのイメージになるんじゃないかと思います。


CC BY-SA 4.0
2020-10-06T15:39:49.850
70967
2020-10-06T15:39:49.850
37787
69802
answer