not-found ページがレスポンシブに表示されない

[morinokami]

スマホなどで https://nextjs-simple-corporate-site-template.vercel.app/404 を見るとわかるのですが、404 の際にレスポンシブデザインが適用されていないようです。

確認したところ、どうやら viewport などの重要な meta タグがこのページだけレンダリングされていないことが原因のようでした。おそらく vercel/next.js#52718 などが関連しており、これは 7 月ごろのリリースで解消されているので、試しに手元で Next.js のバージョンを最新の 13.4.19 に上げてみたところ問題が解消しました。自分が PR を出すか迷いましたが、フレームワークの更新であり色々と影響がありそうなため、一旦ここで問題の報告のみさせていただきます。

[shibe97]

@morinokami
ありがとうございます。
確認してみたところ、自分の環境では問題なく動いているように見えます。

ブラウザ閲覧環境についてご教示いただいても宜しいでしょうか？

[morinokami]

@shibe97 自分が確認したのは Google Chrome の Version 116.0.5845.187 (Official Build) (arm64) や、実機の iOS Safari 16.6、iOS Chrome 117.0.5938.108 などでした。表示されるのはいずれも

のような感じの見た目で、一見問題なさそうですが、他のページと文字のサイズなど諸々異なっています。上のスクショを詳しく確認いただくとわかるのですが、viewport や charset などの meta タグも head 内に見当たらないようです。以下は現在最新の Next.js 13.5.1 にバージョンを上げてローカルで再度確認したスクリーンショットで、本来このような見た目になるものと思われます: