Docker上でNext.js から Ruby on Rails で定義したJSONを取りに行ったときのエラーを解決した

状況

• Docker で Next.js と Ruby on Rails (APIモード) をそれぞれ別のコンテナで立ち上げた
• Ruby on Rails 側のDBに入れたJSONデータを Next.js で getStaticProps() で取得しようとした
• JSONデータに異常はないのに SyntaxError: Unexpected token < in JSON at position 0 エラーが発生した

解決

• {Railsのプロジェクトフォルダ}/config/environments/development.rb の do文 の中に config.hosts << "{Railsを立ち上げたコンテナ名}" を追記する
  ↓ Railsを立ち上げたコンテナの名前が railsserver だった場合の例 ↓

Rails.application.configure do
(省略)
　config.hosts << "railsserver"
end

• Next.js 側の getStaticProps() の中の fetch の引数で http://localhost:3000 と書いていた部分を http://{Railsを立ち上げたコンテナ名}:3000 に変更する
  ↓ Railsのコンテナが railsserver 、Railsで定義したapi名がpostsだった場合の例 ↓

export async function getStaticProps() {
  const res = await fetch("http://railsserver:3000/posts");
  const posts = await res.json();

  return{
    props: {
      posts,
    },
  };
}

• getStaticProps() の return の直前で console.log で確認したらJSONデータを引っ張ってこれてました。