Netlifyにホスティングしたサイトのレスポンスヘッダーを調整する 📡

公式のドキュメントにすべてが書いてありました。
設定方法は2パターンあるようです。

docs.netlify.com

❶ _headersファイルを作る

/*
  X-Frame-Options: DENY
  X-XSS-Protection: 1; mode=block

こんな感じで、レスポンスヘッダーに設定したい内容を_headerという名前で保存して、ルートディレクトリに置いておけばOKです。

❷ netlify.tomlを作る

[[headers]]
  for = "/*"
  [headers.values]
    X-Frame-Options = "DENY"
    X-XSS-Protection = "1; mode=block"

こんな感じで、レスポンスヘッダーに設定したい内容をNetlify.tomlという名前で保存して、リポジトリのルートディレクトリに置いておけばOKです。

僕は、❶の方法、つまり_headersファイルを作成する方法を取っています。
なので、Next.jsの場合はpublicディレクトリに、Nuxt.jsの場合はstaticディレクトリに_headersファイルを収納しています。