Public Folder Structure
The public/ folder contains all static assets that are publicly accessible in your application. These files are served directly by the web server and do not go through the build process.
Use this directory for images, logos, and data files that need to be accessed via a public URL.
/public/images/
This folder contains all image assets used across your app and marketing pages.
Files:
banner.png: The main banner image used in the homepage or marketing hero section. Replace it with your own product or brand image.og-image.png: The Open Graph (OG) image used for link previews on social media platforms. Recommended size: 1200x630 px. Example usage innext.config.jsor meta tags:<meta property="og:image" content="/images/og-image.png" />
/public/search-data/documents.json
This file contains pre-generated search keywords and metadata for the documentation search feature.
Path: public/search-data/documents.json
Example structure:
[
{
"title": "Getting Started",
"keywords": ["setup", "install", "introduction"],
"url": "/docs/getting-started"
},
{
"title": "API Reference",
"keywords": ["api", "endpoints", "authentication"],
"url": "/docs/api"
}
]
You can customize this file to include relevant keywords and URLs for your own documentation pages.
/public/logo.png & /public/logo.svg
These are your project’s logo files.
Recommendations:
- Replace both files with your company or product logo.
- Keep the same filenames (
logo.pngandlogo.svg) to avoid updating import paths elsewhere in the app. - SVG format is preferred for high-resolution and scalable display (especially for dark/light mode versions).
Example usage in code:
import Image from "next/image"
<Image src="/logo.svg" alt="Your App Logo" width={40} height={40} />
Tips
- Always use optimized images for performance.
- Ensure file names and paths remain consistent to prevent broken links.
- When deploying, verify all assets are correctly served from
/public.