Lovable Pages Return 404 on Direct URL
Quick Answer
The hosting platform tries to find a static file for each route. Client-side routing needs all requests to route through index.html or the Next.js handler. Start with "Add Vercel routing config" before making broader code changes.
You're in the right place if...
- !Home page works
- !Navigating to /about returns 404
- !Refreshing any page except home shows 404
Why this happens
The hosting platform tries to find a static file for each route. Client-side routing needs all requests to route through index.html or the Next.js handler.
Fix
Add Vercel routing config
If using Vercel, add a vercel.json to your project root:
{
"rewrites": [
{ "source": "/(.*)", "destination": "/" }
]
}Or tell Lovable to fix it
If you're not sure about the config:
Copy this prompt
Direct URL navigation returns 404 on all pages except home. Please fix routing so all pages work when accessed directly or on page refresh.
Prevent this next time
Test direct URL access (type a page URL directly in the browser) before sharing your site. This catches routing issues early.
Frequently Asked Questions
In-app navigation uses client-side routing (no server request). Direct URLs hit the server, which needs to know to serve your app for all routes.
Yes. If Google can't access your pages directly, they won't be indexed. Fix this before submitting to Search Console.
Related fixes
Weekly Newsletter
Get next week's fix before you need it.
Join developers getting weekly vibe coding tips, error fixes, and tool updates.
Subscribe on Substack →