Static asset paths (images, fonts, icons, JSON files) break after exporting V0 code because the V0 sandbox resolves assets through a virtual file system that does not transfer to a standard Next.js project. Fix this by ensuring all assets exist in the /public directory, replacing sandbox-specific URLs with absolute paths starting from /, configuring next.config.js for external resources, and updating any environment-dependent asset URLs for your deployment platform.
Why static asset paths break after moving V0 code out of the sandbox
V0's preview sandbox serves assets from a virtual file system backed by esm.sh and in-memory storage. When you export via GitHub integration or ZIP download, the asset files themselves may not be included, the paths may reference sandbox-specific URLs, and the directory structure may not match what Next.js expects. Common failures include images returning 404, fonts not loading (causing layout shifts from font fallbacks), favicon files missing, and JSON data files referenced with relative paths that do not resolve in the exported project structure. This page covers all static asset types — for image-specific issues, see the dedicated broken image rendering page.
- Asset files from V0's virtual file system are not included in the GitHub or ZIP export
- Paths reference sandbox-specific blob: URLs or esm.sh CDN addresses that do not exist outside V0
- Relative paths like ./assets/logo.png do not resolve correctly in Next.js App Router's file structure
- The /public directory is missing or incomplete in the exported project
- Font files referenced via CSS @font-face rules point to paths that do not exist locally
Error messages you might see
GET /assets/logo.svg 404 (Not Found)The asset file does not exist in the /public directory. In Next.js, static files must be placed in /public and referenced with absolute paths starting from / (e.g., /assets/logo.svg maps to public/assets/logo.svg).
Failed to decode downloaded font: http://localhost:3000/fonts/custom-font.woff2The font file is missing from the /public/fonts directory, or the file is corrupted. Download the original font file and place it at the exact path referenced in your CSS.
Module not found: Can't resolve './data/products.json'A relative import path for a JSON data file does not resolve in the exported project. Move the file to the correct location relative to the importing component, or place it in /public and fetch it with an HTTP request.
Before you start
- V0 code exported via GitHub integration or ZIP download
- The exported project running locally or deployed to a hosting platform
- Access to the original asset files (images, fonts, icons) used in the V0 project
How to fix it
Audit all asset references in the exported code
Before fixing individual assets, you need a complete list of every asset path in the project. This prevents repeatedly discovering new broken assets.
Audit all asset references in the exported code
Before fixing individual assets, you need a complete list of every asset path in the project. This prevents repeatedly discovering new broken assets.
Open the exported project in your IDE and use global search to find all asset references. Search for src=, href=, url(, and /public to identify every static asset path. Also check the browser DevTools Network tab for any 404 responses on fonts, images, and other resources.
// Multiple broken asset paths scattered across files<img src="blob:https://v0.dev/abc123" /><link href="/fonts/inter.woff2" /><Image src="/images/hero.png" />// Asset audit checklist:// 1. blob: URLs — replace with local /public paths// 2. /fonts/ — verify files exist in public/fonts/// 3. /images/ — verify files exist in public/images/// 4. /icons/ — verify files exist in public/icons/// 5. data files — verify location matches import pathExpected result: A complete list of all asset paths that need fixing in the project.
Place all static assets in the /public directory
Next.js serves files from the /public directory at the root URL path. A file at public/images/logo.svg is accessible at /images/logo.svg. This is the only location for static assets in a Next.js project.
Place all static assets in the /public directory
Next.js serves files from the /public directory at the root URL path. A file at public/images/logo.svg is accessible at /images/logo.svg. This is the only location for static assets in a Next.js project.
Create the necessary subdirectories inside /public (images, fonts, icons, etc.). Download or copy the original asset files into these directories. Ensure file names match the paths referenced in your code exactly, including casing.
// File structure — missing /public directoryproject/ app/ components/ package.json// File structure — assets in /publicproject/ app/ components/ public/ images/ logo.svg hero.png fonts/ inter-var.woff2 icons/ favicon.ico package.jsonExpected result: All static assets are accessible at their expected URL paths.
Replace sandbox-specific URLs with /public paths
V0's sandbox generates blob: URLs and esm.sh references that only work inside the V0 preview environment. These must be replaced with paths to files in your /public directory.
Replace sandbox-specific URLs with /public paths
V0's sandbox generates blob: URLs and esm.sh references that only work inside the V0 preview environment. These must be replaced with paths to files in your /public directory.
Search for blob:, esm.sh, and v0.dev in all project files. Replace each reference with an absolute path starting from / that points to the corresponding file in /public.
<Image src="blob:https://v0.dev/abc123-hero" alt="Hero" width={1200} height={600}/><style>@font-face { font-family: 'CustomFont'; src: url('https://esm.sh/asset/font.woff2');}</style><Image src="/images/hero.png" alt="Hero" width={1200} height={600}/>{/* Use next/font instead of @font-face for better performance */}import { Inter } from "next/font/google";const inter = Inter({ subsets: ["latin"] });Expected result: All asset references point to real files in the /public directory or use Next.js built-in font loading.
Use next/font for font loading instead of manual @font-face
Next.js provides the next/font module that automatically optimizes fonts, eliminates layout shift by preloading, and self-hosts Google Fonts. This is more reliable than manual @font-face rules that depend on correct file paths.
Use next/font for font loading instead of manual @font-face
Next.js provides the next/font module that automatically optimizes fonts, eliminates layout shift by preloading, and self-hosts Google Fonts. This is more reliable than manual @font-face rules that depend on correct file paths.
Replace any manual @font-face declarations with next/font imports. For Google Fonts, import from next/font/google. For local fonts, import from next/font/local.
// globals.css — manual font loading@font-face { font-family: 'Inter'; src: url('/fonts/inter-var.woff2') format('woff2'); font-weight: 100 900; font-display: swap;}// app/layout.tsx — using next/fontimport { Inter } from "next/font/google";const inter = Inter({ subsets: ["latin"] });export default function RootLayout({ children,}: { children: React.ReactNode;}) { return ( <html lang="en"> <body className={inter.className}>{children}</body> </html> );}Expected result: Fonts load reliably with zero layout shift, and no manual font file management is needed.
Complete code example
1import type { Metadata } from "next";2import { Inter } from "next/font/google";3import "./globals.css";45const inter = Inter({ subsets: ["latin"] });67export const metadata: Metadata = {8 title: "My App",9 description: "Built with V0 and Next.js",10 icons: {11 icon: "/icons/favicon.ico",12 apple: "/icons/apple-touch-icon.png",13 },14 openGraph: {15 images: ["/images/og-image.png"],16 },17};1819export default function RootLayout({20 children,21}: {22 children: React.ReactNode;23}) {24 return (25 <html lang="en">26 <body className={inter.className}>{children}</body>27 </html>28 );29}Best practices to prevent this
- Always place static assets in /public and reference them with absolute paths starting from / — never use relative paths
- Use next/font for all font loading instead of manual @font-face rules to eliminate layout shift and simplify deployment
- Check the browser DevTools Network tab for 404 responses immediately after deploying to catch all missing assets
- Keep asset file names lowercase and use hyphens instead of spaces — Linux servers are case-sensitive
- Use the Next.js Image component for all images to get automatic optimization and lazy loading
- When exporting via ZIP, verify the /public directory and all subdirectories are complete before deploying
- For complex asset migration from V0 to production, RapidDev can audit and fix all asset paths systematically
Still stuck?
Copy one of these prompts to get a personalized, step-by-step explanation.
I exported my V0 project and many static assets are broken — images show 404, fonts are not loading, and the favicon is missing. How do I systematically fix all asset paths in a Next.js App Router project?
Frequently asked questions
Why are my static assets broken after exporting from V0?
V0's preview sandbox uses a virtual file system that resolves assets differently than a standard Next.js project. When you export, the actual asset files may not be included, and paths may reference sandbox-specific URLs. Place all assets in the /public directory and use absolute paths.
Where do static files go in a Next.js project?
All static files must be placed in the /public directory at the project root. A file at public/images/logo.svg is accessible at the URL /images/logo.svg. Next.js does not serve static files from any other directory.
How do I fix fonts not loading after V0 export?
Replace manual @font-face rules with next/font imports. For Google Fonts, import from next/font/google. This eliminates the need to manage font files manually and prevents layout shift with automatic preloading.
Do I need to copy /public directory files separately when exporting via GitHub?
The GitHub integration should include the /public directory in the v0/main branch. If files are missing, download them from the V0 editor individually or use the ZIP export to get a complete snapshot.
Can RapidDev help migrate all assets from a V0 export?
Yes. RapidDev can audit your exported V0 project, identify all broken asset references, set up the /public directory structure, configure next/font for typography, and ensure every asset loads correctly in production.
Should I use relative or absolute paths for assets in Next.js?
Always use absolute paths starting from / for assets in the /public directory. Relative paths like ./images/logo.svg resolve differently depending on the current route and can break when navigating between pages.
Talk to an Expert
Our team has built 600+ apps. Get personalized help with your issue.
Book a free consultation