Next.js Static File Serving

Next.js Static File Serving: Managing Assets in the Public Directory

Next.js Static File Serving demonstrates how to organize static assets like images, brand logos, favicons, site manifests, and robots files using the root /public directory.

Files located inside the public/ directory are mapped directly to the root URL / path of your web application.

Public File Directory Mapping

Consider the following folder contents in your project:

my-project/
├── public/
│   ├── favicon.ico
│   ├── logo.svg
│   ├── docs/
│   │   └── terms.pdf
│   └── images/
│       └── hero-banner.png

These assets are accessible directly in the browser at the following URL paths:

• public/logo.svg -> https://example.com/logo.svg
• public/docs/terms.pdf -> https://example.com/docs/terms.pdf
• public/images/hero-banner.png -> https://example.com/images/hero-banner.png

Referencing Public Assets in Code

Reference files stored inside public/ using absolute root path strings:

// app/components/BrandHeader.tsx
import Image from 'next/image';

export default function BrandHeader() {
  return (
    <header className="flex items-center space-x-4 p-4 border-b">
      {/* Root reference directly points to public/logo.svg */}
      <Image
        src="/logo.svg"
        alt="Company Brand Logo"
        width={40}
        height={40}
      />
      <a href="/docs/terms.pdf" target="_blank" className="text-blue-600 underline">
        Download Terms (PDF)
      </a>
    </header>
  );
}

Caching for Static Files

Assets served from the public/ folder are immutable by default and cached aggressively by browsers and CDN edge nodes.

Best Practices

• Do Not Name Files public inside Code Imports: Use /logo.svg instead of /public/logo.svg.
• Keep Sensitive Data Out of Public: Never store private API keys, credentials, or customer database backups inside the public/ folder.

Summary

The public/ directory simplifies serving static assets. Root URL mapping allows clean referencing of brand logos, downloadable documents, and site icons.