新しくリリースされた AWS Amlify を触る
りょた参考資料
りょたこちらを利用させてもらう。
公開してくれているのは大感謝しかない！！
りょたとりあえずローカルにPJを作成
npx create-next-app@latest new-amplify-trial --use-npm --example "https://github.com/vercel/app-playground"
ログの出力先が気になるので、console.logを追記する
console.log("@@@@@@@@@@@@@@@@@@@","streaming/edge/product/[id]/page.tsx call")
console.log("@@@@@@@@@@@@@@@@@@@","streaming/node/product/[id]/page.tsx call")
Amplify のビルド情報を眺める
りょたビルド失敗。。辛いぜ。。
Build failed
2023-11-19T01:37:38.041Z [INFO]: Please check the supported SSR features to find if your build failure is related to an unsupported feature: https://docs.aws.amazon.com/amplify/latest/userguide/ssr-Amplify-support.html#supported-unsupported-features. You may also find this troubleshooting guide useful: https://docs.aws.amazon.com/amplify/latest/userguide/troubleshooting-ssr-deployment.html
ローカルでビルドする。
ローカルではビルドが成功する。
りょたこれか。。
まだedgeには対応できていないのか。。
エッジ API ルートが原因で Next.js ビルドが失敗する
現在、Amplify は Next.js エッジ API ルートをサポートしていません。AAmplify でアプリをホストするときは、エッジ以外のAPIとミドルウェアを使用する必要があります。
りょたAmplify のNextのバージョン上書きの箇所をlatestにしてみる。再びビルド。
==> failed
りょたedgeの部分を変更してみる。ローカルでのビルドはOK。
エラーは変わらず。。
りょたexperimental-edge泣く泣くこちらも削除してみる。
まだ失敗してしまう。。
りょたon-demand ISRの箇所も削除してみる。
オンデマンドのインクリメンタル・スタティック・リジェネレーションがアプリでは機能しない
バージョン 12.2.0 以降、Next.js は特定のページの Next.js キャッシュを手動で削除するインクリメンタル・スタティック・リジェネレーション (ISR) をサポートしています。ただし、Amplify は現在オンデマンドISRをサポートしていません。アプリが Next.js のオンデマンド再検証を使用している場合、アプリを Amplify にデプロイしてもこの機能は機能しません。
りょた13.4.2でビルドが成功したので、
コミットを取り消して、ダウングレードしてみる。
りょた13.4.2 だと
next/og は未対応なのか。。
りょたビルド成功した🎉
14.0.0 は未対応かもです。
りょたnextのバージョンを13.5にしてみる。
りょたビルドは成功したが、依然としてstreamingはうまくいかない。。
りょたnext/og は未対応なのか。。
og抜きで14.0にしてみる。
りょたやっぱりダメだった。。
Build failed
りょたどうしたらedge locationでコードが動いているか確認できるのかー。
x-edge-locationを見るっぽい。
しかし、アクセスログに出ていない。。
りょた
りょたシンプルなPJをホスティングしてみる。
同じエラーが出た。。
14.0.0が無理なのかも・・
りょたnextのバージョンをstable(13.4.2)に変更してビルド。
==> 成功！！🎉
まだ14.0が未対応かも。
りょたedge のマークはイプシロンなのか！
りょたedgeのログもnodeと同じ場所に吐き出される。
amplify > モニタリング > コンピュートログ
@@@@@@@@@@@@@@@@@@@ streaming/edge/product/[id]/page.tsx call
確かにサーバー側でレンダリングされるコンポーネントになっている。サーバー側のログに出力されている。
りょたstreamingの箇所がうまくいかない。。スケルトンローディングが表示されない。transfer-encoding chunked も表示されない。
対応できてないのか。。
りょたNext.js adapter を使ってみる
Amplify’s JavaScript library now supports all Next.js capabilities in a new Next.js adapter
りょた記事タイトル案
playground公式の動きと比べてみた。
Amplify Hosting の現在地
りょた🎉 Next.js 14 対応！！
Amplify Hosting now has Next.js 14 support as well. To use this new feature, set amplify:al2023 as the value for the custom build image if this is the app’s first deployment. Conversely, if the app has already been deployed, then select the Amazon Linux: 2023 image from the dropdown.
りょたOG確認