Layout breaks only on custom domain in production

Help
,
1

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: GitHub - suzuki3jp/PlaylistWizard: 📝 Easily manage and organize your playlists on the web! - Playlist Manager
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

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.

1 Like
2

The domain troubleshooting guide can help with most custom domain configuration issues. You might be able to use that guide to solve it before a human is available to help you. Then you can come back here and share the answer for bonus points.

You can also use v0 to narrow down the possibilities.

1 Like
5

@suzuki3jp Is the custom domain forwarded through a domain provider or a service like Cloudflare? If so, that could be the issue. Cloudflare has broken my website before by applying some kind of script to it to optimize assets that didn’t work.

6

As far as I understand, my custom domain is routed directly to Vercel via pure DNS settings, without using any additional services like Cloudflare.
But I’m not very confident about domain-related configurations, so please let me know if there’s anything I should double-check.

1 Like
7

Hmm, I can’t think of anything else DNS-related to check. Do you have the Vercel toolbar enabled on any of the deployments, perhaps?

8

I’ve turned off the Vercel Toolbar for both Production and Pre-Production from the Vercel dashboard: Settings > General > Vercel Toolbar.

1 Like
9

Hmm, besides extensions (which shouldn’t run in private mode like you said), I can’t think of why this is happening…
Hopefully the Vercel team will get back to you next week!

10

Your replies helped me add information I hadn’t considered to the question. Thanks a lot for your support!

2 Likes