前提
- NextでWEBページ
index.jsとDB接続用のAPIget-data.jsを定義 -
index.jsのgetStaticPropsでget-dataAPIを叩いていた
index.js
import fetch from "node-fetch"
export async function getStaticProps({ params }) {
// getStaticPropsでget-dataAPIを叩く
const res = await fetch("http://localhost:3000/api/get-data")
const data = await res.json()
return { props: { data } }
}
export default function Index({ data }) {
...省略
}
api/get-data.js
export default async (req, res) => {
// DB接続してデータ取得
const data = await getData()
res.status(200).json(data)
}
現象
-
next devだと問題は発生せず、期待通り動いたのですが… -
next buildだと以下のようなエラーが発生しました
$ next build
...省略
Compiled successfully.
Automatically optimizing pages ..
Error occurred prerendering page "/index". Read more: https://err.sh/next.js/prerender-error:
FetchError: request to http://localhost:3000/api/get-data failed, reason: connect ECONNREFUSED 127.0.0.1:3000
解決策
stack overflowにそのまんまな事象と解決策があったので参考にしました
https://stackoverflow.com/questions/61452675/econnrefused-during-next-build-works-fine-with-next-dev
公式ドキュメントに記載してある通り、
You should not fetch an API route from getStaticProps — instead, you can write the server-side code directly in getStaticProps.
とのことなのでgetStaticPropsでAPIルートを呼んではいけないようです。
getStaticPropsはサーバサイド処理のため、APIで実行したい処理をそのままかけ、ということでした。
変更後
index.js
export async function getStaticProps({ params }) {
// getStaticPropsでDB接続してデータ取得
const data = await getData()
return { props: { data } }
}
export default function Index({ data }) {
...省略
}
get-data.jsは不要になったため削除しました
ふりかえり
next devだと問題ないのにnext buildだとエラーが発生する意味がわからなく、ポートを固定したのがよくなかったのか？とかbuildで外部APIの接続確認を行っているオプションを外せないか？などかなりはまってしまいました。。解決してよかったです。
そもそもgetStaticPropsはビルド時にサーバサイド側で走る処理なので、DB接続があるからといってAPIを経由する必要はありませんでした。DB処理をAPI側にまとめたいと思って余計なことをしていました…。ドキュメントちゃんと読め、という話ですね。。反省…