はじめに
Next.jsにはAPIルートという機能があり、Next.jsを用いてAPIの実装が可能です。
APIルートはVercelでServerless Functions機能として位置しており、Next.jsだけでなくNode.jsやPythonなどの言語もサポートしています。
今回はAPIルートについて説明するわけではないので、詳しく知りたい方は下記から確認してください。
- API Routes: はじめに | Next.js
- Serverless Functions – Vercel Docs
- Supported Languages for Serverless Functions
HobbyプランのServerless Functionsの制限について
料金プランではなくLimitsページに記載があり、HobbyプランではServerless Functionsは12個までしかデプロイできない記載があります。
※2022年12月2日時点
ただし、Next.jsについては下記のように単純にServerless Functionsを12個超えたとしても、その制限にかかるわけではないです。
In the case of the "Serverless Functions Created per Deployment" limit, only dedicated Lambdas are counted as one Serverless Function. With Next.js, Vercel will automatically combine as many Serverless Functions as possible into a single Lambda, as mentioned in bundling serverless functions.
実際に試してみる
まずはNext.jsのLPよりnextjs-boilerplateをVercelへデプロイしてみます。
デプロイのログを確認してみると、λのマークが付いてるものがServerless Functionsということがわかります。
上記にも記載の通り、Next.jsでは単純にλが12個超えたところで制限にかかるわけではないですが、制限を超えると下記のようなエラーメッセージが表示され、デプロイエラーとなります。
ここからが本題
普段、Next.jsを用いた開発をするとき、ルートに/apiというディレクトリを作ってバックエンドのAPIを叩く用のファイルを集約しています。
この状態でVercelにデプロイするとpages/apiでなく/apiの中身まで、すべてServerless Functionsと識別されてしまい、12個を超えるファイルが配置されていた場合、上記と同じエラーが表示されてしまいます。
デプロイのログを見てるとログの最初の方に下記のワーニングが表示されてることが確認できます。
要するにNext.js以外の言語が/apiのディレクトリを使用するので、Next.jsでも同様に/apiディレクトリ内のファイルがServerless Functionsとしてカウントされてしまったようです。
解決策
/apisに変更してエラーを回避しました。
まとめ
Vercelを利用する際には事前にLimitsページを確認して、要件に合うか確認したほうがよさそうですね。
最後に
GoQSystemでは一緒に働いてくれる仲間を募集中です！
ご興味がある方は以下リンクよりご確認ください。