Next.js x vercelでアプリを開発していたところ、本番環境のみmanifest.jsonの読み込みがエラーとなっているのを発見。
Failed to load resource: the server responded with a status of 401 (Unauthorized)これも出てた👇
Manifest: Line: 1, column: 1, Syntax error.原因
どうやらBasic認証をかけていると、manifest.jsonにアクセスできないらしい。crossorigin 属性を use-credentials に設定してあげればよいっぽい↓
マニフェストへのアクセスに資格情報が必要な場合は、マニフェストファイルが現在のページと同じオリジンにあったとしても、 crossorigin 属性を use-credentials に設定する必要があります
https://developer.mozilla.org/ja/docs/Web/Manifest
対応方法
基本的には以下のようにmanifest.jsonの読み込みタグにcrossorigin="use-credentials"を付与してあげれば◎
<link rel="manifest" href="/manifest.json">↓ このように変更する
<link rel="manifest" href="/manifest.json" crossorigin="use-credentials">Next.js15のApp routerの場合、ちょっと悩ましかった
Next.js15では、app/にmanifest.jsonというファイル名で設置するとnextjsが自動で検知しタグを出力してくれます。
なので、linkタグを触ることができなかったんですよねえ🥺
結局こうやって対応しました
本当はnextjsが自動で出力してくれるタグにオプション的な感じで属性が追加できたら理想だったのですが、どうしても方法が見つけれられず・・・！
最終的に以下の方法で対応しました。
①public/にmanifest.jsonを設置
②headタグにてmanifest.jsonの読み込みタグを記述
// layout.tsx
export default function RootLayout({
children,
}: Readonly<{
children: React.ReactNode;
}>) {
return (
<html lang="jp" className={notosans.className}>
<head>
<link
rel="manifest"
href="/manifest.json"
crossOrigin="use-credentials"
/>
</head>
<body>
{children}
</body>
</html>
);
}③app/manifest.jsonを削除（重複してしまうため）
