Next.js x vercelでアプリを開発していたところ、本番環境のみmanifest.jsonの読み込みがエラーとなっているのを発見。
Loading code...これも出てた👇
Loading code...原因
どうやらBasic認証をかけていると、manifest.jsonにアクセスできないらしい。crossorigin 属性を use-credentials に設定してあげればよいっぽい↓
マニフェストへのアクセスに資格情報が必要な場合は、マニフェストファイルが現在のページと同じオリジンにあったとしても、 crossorigin 属性を use-credentials に設定する必要があります
https://developer.mozilla.org/ja/docs/Web/Manifest
対応方法
基本的には以下のようにmanifest.jsonの読み込みタグにcrossorigin="use-credentials"を付与してあげれば◎
Loading code...↓ このように変更する
Loading code...Next.js15のApp routerの場合、ちょっと悩ましかった
Next.js15では、app/にmanifest.jsonというファイル名で設置するとnextjsが自動で検知しタグを出力してくれます。
なので、linkタグを触ることができなかったんですよねえ🥺
結局こうやって対応しました
本当はnextjsが自動で出力してくれるタグにオプション的な感じで属性が追加できたら理想だったのですが、どうしても方法が見つけれられず・・・！
最終的に以下の方法で対応しました。
①public/にmanifest.jsonを設置
②headタグにてmanifest.jsonの読み込みタグを記述
Loading code...③app/manifest.jsonを削除（重複してしまうため）
