Fix guides

Blank white screen after deploy

The preview looked fine, the live site is a white page. How to find the real error behind a blank screen in a React, Vite, or Next.js app built with AI.

What you are seeing

• The deployed site loads a white page with no visible error.
• The home page works but refreshing any other route shows 404 or blank.
• It only breaks for logged-out users, or only on mobile.

Why it happens

1. A JavaScript error during the first render. React unmounts the whole tree, which looks like a blank page.
2. A single page app on a static host with no rewrite rule, so deep links return 404.
3. Missing environment variables (see the env vars guide) causing a client init to throw.
4. Wrong base path, so the JS and CSS files 404.
5. Code that touches window or localStorage during server rendering in Next.js.

How to fix it

1. Read the actual error

Open the live site, open DevTools, and check the Console and Network tabs. A red error or a 404 on a .js file tells you which cause it is.

2. Add SPA rewrites (Vercel, vercel.json)

{ "rewrites": [{ "source": "/(.*)", "destination": "/index.html" }] }

3. Add SPA rewrites (Netlify, public/_redirects)

/*  /index.html  200

4. Add an error boundary so failures are visible

import { ErrorBoundary } from 'react-error-boundary';

<ErrorBoundary fallback={<p>Something went wrong.</p>}>
  <App />
</ErrorBoundary>

5. Reproduce the production build locally

npm run build && npm run preview

How to know it is fixed

Load the live site in a private window, refresh on a deep link, and check the console is clean.