I'm building a web application using Next.js, and I'm deploying it to Vercel with GitHub integration. All the source code is available here: https://github.com/suzuki3jp/playlistwizard My Vercel project name is playlistwizard
Currently, I'm experiencing a layout issue only when accessing the production deployment via my custom domain (https://playlistwizard.suzuki3.jp).
Problem
-
When I run the app locally with next dev or next build && next start, everything looks correct.
-
When I access the unique preview URLs generated by Vercel (e.g., *.vercel.app), the layout is also correct.
-
However, when I access the production deployment through the custom domain, the layout breaks.
Observation
-
In all environments except the production custom domain, the html element's width is about 1900px.
-
On the production custom domain, the width becomes about 2120px, causing the layout to break.
What I’ve tried
- Vercel Dashboard > Settings > Data Cache > Purge Everything
- Access to https://playlistwizard.suzuki3.jp from secret window
Question
What could be causing this difference in rendering only on the custom domain? Are there any domain-specific settings, caching behaviors, or headers that might affect the layout rendering?
Any help or guidance would be appreciated.