Static Assets in public/

Files in the public/ folder are served from the site root at their exact path.

Syntaxpublic/logo.svg → /logo.svg

The public/ folder holds static files served as-is from the root of your site. A file at public/logo.svg is available at /logo.svg. Use it for favicons, robots.txt, and images you reference by URL.

Example

Example · typescript
// public/logo.svg  ->  available at /logo.svg
export default function Header() {
  return (
    <header>
      {/* referenced by absolute path from the root */}
      <img src="/logo.svg" alt="Logo" width={120} height={40} />
    </header>
  );
}

When to use it

  • A team puts robots.txt and sitemap.xml in public/ so they are served from the site root without route handlers.
  • A developer stores company logo files in public/images/ and references them with /images/logo.svg in the app.
  • A progressive web app's manifest.json and service worker script live in public/ to be served at the exact paths browsers expect.

More examples

Reference a public image

Files in public/ are served from / — the logo is available at /logo.svg without import statements.

Example · ts
// File: public/logo.svg
// URL:  https://yoursite.com/logo.svg

export default function Header() {
  return <img src="/logo.svg" alt="Company logo" width={120} height={40} />;
}

robots.txt in public/

Placing robots.txt in public/ serves it at the standard /robots.txt path that search engine crawlers expect.

Example · bash
# public/robots.txt
User-agent: *
Disallow: /api/
Sitemap: https://yoursite.com/sitemap.xml

PWA manifest in public/

A manifest.json placed in public/ is reachable at /manifest.json, the default path browsers look for PWA metadata.

Example · json
{
  "name": "My App",
  "short_name": "App",
  "start_url": "/",
  "display": "standalone",
  "background_color": "#ffffff",
  "icons": [
    { "src": "/icon-192.png", "sizes": "192x192", "type": "image/png" }
  ]
}

Related

next image

Discussion

  • Be the first to comment on this lesson.