serverless-nextjsとは

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にも同じ内容のバグ報告が上がっていましたが、明確な原因は掴めず…。もし、ビルドできず悩んでいる方がおられましたら、まずはバージョンの変えてみることをおすすめします。