Next.jsでSSGした成果物をS3に配置してCloudfrontで提供する場合、Lambda@Edgeで適切にパスの書き換えを行わないといけない。

これ自体はNext.jsのtrailing slashオプションを利用することでも対応できるが、trailing slashをつけたくない場合はLambda@Edgeを使用すると良い

index.tsxなどの静的なページはこれで問題ないが、dynamic routeを使用しているページはこれだと403になってしまう。

Next.jsアプリをビルドすると、articles/[id].tsxというページはarticles/[id].htmlとしてビルドされるため/articles/xxxYYYzzzのようなパスでURLに直接遷移しても対象となるファイルがS3に存在せず403となってしまう。

簡単な対処法としてはCloudFrontのError Pagesの設定で、エラーコードが403の場合に/404リダイレクトし、且つ404.htmlの中で特定のパスの場合はアプリケーション内でルーティングし直すように設定することである。

Lambda@Edgeの段階で特定のパスの場合は/404もしくはルーティング用のページに飛ばすという対応も考えられる。