What is the purpose of the public directory in a Next.js project?

The public directory is where Next.js serves static assets straight from disk. Files inside it are exposed at the site root, with the same path as their location in the folder.

public/
  favicon.ico       => /favicon.ico
  robots.txt        => /robots.txt
  images/logo.png   => /images/logo.png

Reference them in your code with absolute paths:

<img src="/images/logo.png" alt="Logo" />
<link rel="icon" href="/favicon.ico" />

What belongs here:

• favicon.ico, apple-touch-icon.png, manifest.json — files browsers expect at fixed root paths.

• robots.txt and sitemap.xml — for SEO. (App Router can also generate these dynamically via app/robots.ts and app/sitemap.ts.)

• OpenGraph or social-share images that need stable URLs.

• Files that need to be referenced by external services — domain verification files, well-known directories.

• Static images you don't want optimized — though usually the next/image pipeline is preferable.

What doesn't belong here:

• Optimizable images — for product photos, hero images, or anything user-facing, use next/image with files imported from app/ or fetched from a CDN. next/image generates responsive sizes, modern formats (AVIF, WebP), and lazy-loads automatically.

• Code or modules — anything imported from JavaScript should live in app/, src/, or your component folders, not public/.

• Secrets or private files — everything in public/ is downloadable by anyone. Don't put API keys, configs, or anything sensitive here.

• Large media or many files — public/ is bundled into the deployment artifact. For big asset libraries, use object storage (S3, R2) and a CDN.

One quirk: the public/ directory is read at build time on Vercel, so changing files there requires a redeploy. Genuinely dynamic file serving belongs in object storage with a CDN, not the framework's static folder.