Fixing 404 errors on page refresh in v0 single page apps

Why page refreshes cause 404 errors in exported V0 apps

V0 apps use Next.js App Router, which supports both server-side and static rendering. When deployed to Vercel via Share then Publish, routing works correctly because Vercel understands Next.js routing natively. However, when you export V0 code and deploy it elsewhere — or use output: 'export' for a static build — the server receives a request for /dashboard but has no corresponding HTML file at that path. Without a fallback rule, the server returns 404. This is different from general Vercel deployment route issues, which involve Next.js-specific configuration problems rather than SPA fallback rules.

• Static export (output: 'export' in next.config.js) without generating all route HTML files
• Dynamic routes like /blog/[slug] without generateStaticParams in static export mode
• Deploying to a non-Vercel host without SPA fallback configuration
• Incorrect basePath configuration causing all routes to 404 except the root
• Trailing slash mismatch between generated paths and server expectations

Error messages you might see

Before you start

• Exported V0 project deployed to a hosting platform
• Access to the hosting platform's configuration (Vercel, Netlify, or server config)
• Understanding of the difference between static export and server-side rendering

How to fix it

// next.config.js — static export causes 404 on refresh
const nextConfig = {
  output: 'export',
};

// next.config.js — let Vercel handle routing natively
const nextConfig = {
  // Remove output: 'export' for Vercel deployment
};

// app/blog/[slug]/page.tsx — fails in static export
export default function BlogPost({
  params,
}: {
  params: { slug: string };
}) {
  return <article>{params.slug}</article>;
}

// app/blog/[slug]/page.tsx — works in static export
export async function generateStaticParams() {
  const posts = await fetch('https://api.example.com/posts')
    .then(res => res.json());
  
  return posts.map((post: { slug: string }) => ({
    slug: post.slug,
  }));
}
export default function BlogPost({
  params,
}: {
  params: { slug: string };
}) {
  return <article>{params.slug}</article>;
}

// No fallback configured — server returns 404 for /dashboard

// Netlify: public/_redirects
// /*  /index.html  200
// Nginx:
// location / {
//   try_files $uri $uri.html $uri/ /index.html;
// }
// vercel.json (for custom Vercel config):
// {
//   "rewrites": [
//     { "source": "/(.*)", "destination": "/index.html" }
//   ]
// }

// next.config.js — missing basePath for subpath deploy
const nextConfig = {};

// next.config.js — configured for subpath deployment
const nextConfig = {
  basePath: '/app',
  trailingSlash: true,
};

Complete code example

1/** @type {import('next').NextConfig} */
2const nextConfig = {
3  // For Vercel deployment: remove 'output: export'
4  // For static hosting: uncomment the line below
5  // output: 'export',
6
7  // Set basePath if deploying to a subpath
8  // basePath: '/my-app',
9
10  // Enable trailing slashes if your host requires them
11  // trailingSlash: true,
12
13  images: {
14    // Required for static export — disable Image Optimization
15    // unoptimized: true,
16  },
17};
18
19module.exports = nextConfig;

Best practices to prevent this

• Deploy to Vercel whenever possible — it handles Next.js routing natively without any fallback configuration
• Avoid output: 'export' unless your hosting platform requires static files — it removes server-side capabilities
• Always add generateStaticParams to every dynamic route when using static export
• Test page refresh on every route after deploying, not just the home page
• Set trailingSlash consistently — mismatches between your config and hosting cause subtle 404s
• For complex deployments to non-Vercel platforms, consider RapidDev for deployment configuration assistance

Still stuck?

Copy one of these prompts to get a personalized, step-by-step explanation.

Related error patterns

Explore related guides

Guides from other topics that help with this issue