AmplifyのNextJS13サポートされたのでみていくよ

最近AWSのアップデートが多くキャッチアップに時間が取られています( ´△｀)

ちょうど１ヶ月ほど前、AmplifyでNextJSをSSRで動かそうとしていたのですがバージョン13が未対応だったためビルドが通らずバージョンを落として使っていました。

しかし、先日読んだ公式日本語ブログで13サポート＆幾つか便利になったとのことで実際に見ていきたいと思います。

前準備

create-next-appなりでVer13の新規プロジェクトを作成します。まずはSSGを試したいのでpackage.jsonのbuildを以下のように変更します。

build": "next build && next export",

が、この状態でnpm run buildを行うとImageコンポーネントでこんなエラーが出ます。

Error: Image Optimization using Next.js' default loader is not compatible with `next export`.
  Possible solutions:
    - Use `next start` to run a server, which includes the Image Optimization API.
    - Configure `images.unoptimized = true` in `next.config.js` to disable the Image Optimization API.
  Read more: https://nextjs.org/docs/messages/export-image-api

この場合はnext.config.jsのimages.unoptimizedをtrueにするかImageコンポーネントのpropsにunoptimized = trueを設定するか、そもそもImageを使わないといった対応が必要です。いずれかを行なってnpm run buildが成功したらGitHubリポジトリにPUSHすれば準備OK

AmplifyでWebアプリを作成

Amplifyの画面で「新しいアプリケーション」→「ウェブアプリケーションをホスト」を選択して先ほどのリポジトリをデプロイします。この辺は以前と変わらないので省略しますが、公式にもあるようにビルド時間が体感的に少し早くなったような気がします。ブラシーボ？

NextJSの初期設定画面が表示できました。

ここで、一応他のAWSサービスに何か変わった設定はないか何気なく開いていくと...デプロイしたAmplifyに紐づくCloudFrontとS3が存在しないことに気づきました。完全にカプセル化することになったのか、デフォルトでは表示されなくなったのか、自分の見間違いなのか。

ちなみにデプロイしたWebアプリのレスポンスヘッダーにはserver: AmazonS3とx-cache: miss from cloudfrontとあるので見えなくなっただけかも。

いやー、前はちゃんと見えたんですけどね。削除し忘れたS3バケットがまだあったりCloudFrontからLambda Edgeが紐づいてるのを確認したことがあったので。モヤモヤしますが次に進みます。

SSRでデプロイ

今度はSSRを試します。まずはpackage.jsonを"build": "next build"に戻してmainにPUSHします。一度SSG設定でAmplifyアプリを作成するとSSRに変更が出来なそうなので新たにもう一つAmplifyアプリを作ります。

デプロイ後にもう一度トップ画面と、デフォルトの/api/helloのレスポンスヘッダーを見てみます。先ほどと違ってserver: CloudFront、x-cache: Miss from cloudfrontとなっており、おそらくLambda Edgeが実行されていると思われます。こちらも同じく、バージニア北部のLambdaを開いても見えません😥