AWS環境にNext.jsをお手軽にデプロイするツールにserverless-nextjs
というものがあったので、最近試してみていました。
serverless-nextjsとは
github.com
Serverless Framerworkを使っているならお馴染みのserverless.yml
ファイルに、Next.js用の記述を書いてserverless
コマンドを叩くだけで、AWSのCloudfront, Lambda, S3に各種データを展開してくれる超便利ツールです。
Route53で取得したドメインも指定しておけば、CloudFrontにうまい具合に紐づけてくれます。
記述例
serverless.yml
myNextApplication:
component: "@sls-next/serverless-component@1.18.0"
inputs:
domain: ["portfolio", "ts-soda.net"]
通常は↑のファイルをプロジェクトのルートに配置し、serverless
を実行するだけなのですが、
私の場合はNext.jsのビルド段階でTypeError: Object(...) is not a function
エラーが出てしまい、なかなかデプロイできませんでした。
原因
npmパッケージのバージョンによっては、エラーが発生する模様。
next
, react
, react-dom
のバージョンを現時点での最新に上げて、再度serverless
を実行したところ上手くビルドが出来るようになりました。
ビルドに失敗したバージョン
package.json
{
...
"dependencies": {
"next": "10.0.3",
"react": "17.0.1",
"react-dom": "17.0.1",
...
},
...
}
ビルドに成功したバージョン
package.json
{
...
"dependencies": {
"next": "10.1.3",
"react": "17.0.2",
"react-dom": "17.0.2",
...
},
...
}
GitHubのIssueにも同じ内容のバグ報告が上がっていましたが、明確な原因は掴めず…。
もし、ビルドできず悩んでいる方がおられましたら、まずはバージョンの変えてみることをおすすめします。
参考
github.com
sunday-morning.app