NextFire main logoNextFire
Docs X
Introduction
Get Started
Clone repo
Run the app
Configuration
Firebase
Create firebase app
Authentication
Firestore
Storage
Functions
Global configuration
Public
Site config
Payments
Stripe
One time
Subscriptions
Webhooks
Usage
Project structure
Static pages
Public pages
Protected pages
Auth
Client auth
Server auth
Data fetching
Firestore client
Firestore admin
Functions
Storage
Content
Blog
Documentation
Components
Markdown
Cards
Diagrams
Filetree
Lists
Maths
Notes
Steps
Table
Tabs
Public
Deep
Deeper
Even deeper
  1. Global Config
  2. Public

Public Folder Structure

Guide to managing files inside the public/ directory of your SaaS starter boilerplate.

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.

1

/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 in next.config.js or meta tags:
    <meta property="og:image" content="/images/og-image.png" />
    
2

/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.

3

/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.png and logo.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.
Global configurationSite config

On this page

Tips

Content

FeedbackEdit page

© 2025 Ship IT.

Rubix Studios logo