The public Folder in Next.js — Serving Static Files with Direct Paths

1. What Is the public Folder?

In Next.js, the public folder sits at the root of your project and is used to serve static files such as images, text files, fonts, and icons. Files inside this folder are accessible directly via the base URL.

Example:

If you have a file at public/avatars/me.png, you can access it in the browser at /avatars/me.png.

2. Displaying Images with the Image Component

To display images from the public folder, use the Image component from Next.js:

// avatar.js
import Image from 'next/image'

export function Avatar({ id, alt }) {
  return <Image src={`/avatars/${id}.png`} alt={alt} width="64" height="64" />
}

export function AvatarOfMe() {
  return <Avatar id="me" alt="A portrait of me" />
}

3. Caching Behavior

Next.js does not safely cache files in the public folder because they may change at runtime. The default caching header is:

Cache-Control: public, max-age=0

This means the browser will fetch the file fresh each time unless you configure custom headers on your server.

4. Good to Know

• Files in public are not processed during build
• They are ideal for assets that don’t require importing or bundling
• For optimized or dynamic images, prefer using the Image component with internal sources

Conclusion

The public folder in Next.js offers a simple and direct way to serve static files. With base-path URLs, you can easily display images, documents, and other assets without extra configuration. Just keep in mind that caching is limited, and for dynamic or sensitive content, other strategies may be more appropriate.