ブログの編集画面を Next.js で組み直して AWS Lambda 関数 URL で使えるようにした

ふとしです。

Nuxt.js 3 beta で似たようなことをしようと思ってうまく行かなかったので、良い機会だと思って Next.js で組み直しました。

うまく行かなかったことというのは、AWS Lambda へのアクセスを節約するためにアセット類は S3 に逃したいのですが、なぜか js や css のダイナミックインポートの GET に S3 が access-control-allow-origin ヘッダーをつけてくれないという現象を解決できなかったという感じです。

同じ設定で Nuxt.js 2 のプロジェクトは問題なく動いてるのですが、API Gateway の有無でなんか関係あるんでしょうか。

結局このヘッダーがつかない現象は Next.js に変更しても解決しなかったので、Cloudfront を噛ませた上でそのレスポンスヘッダーポリシーで CORS 用のヘッダーを付与することによりやっと access-control-allow-origin が付くようになってダイナミックインポートが成功するようになりました。

そんなわけでこのエントリーは無事デプロイできて動作している編集画面で書いています。濡れ衣を着せてごめんなさい Nuxt.js 3 beta。こんにちは Next.js。(しかし S3 へのアクセスでは origin ヘッダーがつかなくてなんでやねんという感じです。なんで？)

ブログの公開部分も Next.js に変える予定です。