Next.jsの静的ジェネレーションでデータをfetchできなかった話

はじめに

Next.jsの静的ジェネレーション getStaticProps内でAPIからデータをfetchしようとしたところエラーが出て調べたけど記事として上がってなさそうだったので自分が解決した方法を載せます。
同じ問題に遭遇した人がこの記事を見て解決に役立てればと思います。

事象

ローカル開発環境で、APIのサーバとして json-serverを使いました。
json-serverを立ち上げたときのログです。

log

backend_1   | 
backend_1   |   \{^_^}/ hi!
backend_1   | 
backend_1   |   Loading db.json
backend_1   |   Done
backend_1   | 
backend_1   |   Resources
backend_1   |   http://0.0.0.0:80/users
backend_1   | 
backend_1   |   Home
backend_1   |   http://0.0.0.0:80
backend_1   | 
backend_1   |   Type s + enter at any time to create a snapshot of the database
backend_1   |   Watching...
backend_1   | 
backend_1   | GET /users 200 48.743 ms - 355
backend_1   | GET /users 304 6.090 ms - -

http://0.0.0.0/users にアクセスするとちゃんと画面が表示されます。

画面の表示内容

[
  {
    "name": "aaaaa",
    "password": "password",
    "id": 1
  },
  {
    "name": "aaaaa",
    "password": "password",
    "id": 2
  },
  {
    "name": "daodao",
    "password": "password",
    "id": 3
  },
  {
    "name": "daodao",
    "password": "password",
    "id": 4
  },
  {
    "name": "daodao",
    "password": "password",
    "id": 5
  }
]

Next.jsのソースはgetStaticProps内でfetchしています。

export async function getStaticProps() {
  const res = await axios.get('http://0.0.0.0/users')
  console.log(res.data)
  const users = res.data

  return {
    props: {
      users
    }
  }
}

実行するとconnect ECONNREFUSEDというエラーが表示されました。

調べてみると、フロントがサーバとの接続を切断したという意味です。
つまり、リクエストが中断されたということです。

仮説

原因を調べたのですが、良い解決策が見つかりませんでした。
なので、自分で仮説を立てて検証することにしました。

getStaticPropsはビルド時に必要なデータをfetchして事前にHTMLを生成し、ユーザのリクエストがあった時に返します。
ローカル開発環境で立ち上げたサーバは自分のコンピュータのみでしかアクセスできないので、Next.jsをビルドするときにグローバルにアクセスできるサーバでないとデータを取得できないのでこのようなエラーが発生するのかなと仮定しました。

検証

仮説を検証するために、AWSのEC2インスタンスを立ててその中にjson-serverを配置しました。
その際、json-serverで使用するポートを0.0.0.0/0でどこからでもアクセスできるようにしました。

export async function getStaticProps() {
  const res = await axios.get('http://52.196.252.109/users')
  console.log(res.data)
  const users = res.data

  return {
    props: {
      users
    }
  }
}

ブラウザで確認すると、console.logで仕込んだログにちゃんとユーザデータが表示されていました。
また、コンポーネントにusersのpropsが渡ってきているのを確認しました。

まとめ

Next.jsの静的ジェネレーションはサーバがグローバルな環境に置かれていないと、正常にビルドできないと判断しconnect ECONNREFUSEDというエラーを吐き出すようです。
なので、検証するときはサーバをlocalhostではなく、グローバルにアクセスできる環境に置かないと使えないようです。
静的ジェネレーションの仕組みを理解していれば、当たり前といえば当たり前だったかもです。