Next.js App Dir で CSP を設定する - blog.s2n.tech

はじめに 最近このブログに CSP を設定しました。 Next.js ではインラインスクリプトが使われているので Nonce の設定が必要なのですが、 App Dir での Nonce 設定方法が公式ドキュメントに書かれていなかったので、ここにやり方をまとめておきます。 ちなみに App Dir を使用していない場合は _document.tsx の <NextScript> に nonce を渡せばいいです。 注意: この記事では未だ公式ドキュメントで明文化されていない仕様を使用しています。おそらく新しすぎてまだドキュメントになっていないだけだと思いますが、将来的に変更される可能性もありますのでご注意ください。 設定方法 Middleware の作成 Next.js で共通のレスポンスヘッダーを設定する場合は next.config.js に記述すればいいのですが、これは静的な設定になっ