Public directory for static files in NextJS

Introduction

The public directory lets you store files like images or icons that your website can use directly. It makes sharing these files easy without extra setup.

You want to add a logo image that shows on every page.

You need to include a favicon for your website tab.

You want to serve a PDF or document for users to download.

You have static files like robots.txt or sitemap.xml for search engines.

You want to use a static image in your CSS or HTML without importing it.

Syntax

NextJS

public/
  your-file.png
  your-folder/
    another-file.jpg

All files inside the public folder are served at the root URL.

For example, public/logo.png is accessible at /logo.png.

Examples

Use the image directly by referencing its path from the public folder.

NextJS

<img src="/logo.png" alt="Site Logo" />

Place your favicon here so browsers can find it automatically.

NextJS

public/favicon.ico

Link to a PDF stored in public/files/manual.pdf for users to download.

NextJS

<a href="/files/manual.pdf" download>Download Manual</a>

Sample Program

This component shows how to use an image and a downloadable file from the public directory. The logo.png and files/manual.pdf must be inside the public folder.

NextJS

import Image from 'next/image'

export default function Home() {
  return (
    <main>
      <h1>Welcome to My Site</h1>
      <Image src="/logo.png" alt="Site Logo" width={150} height={50} />
      <p>Here is a static image served from the public folder.</p>
      <a href="/files/manual.pdf" download>Download Manual</a>
    </main>
  )
}

Important Notes

Do not import files from public using JavaScript imports; use direct paths instead.

Files in public are not processed by Webpack, so they keep their original names and paths.

Summary

The public folder holds static files accessible by URL paths.

Use direct paths starting with / to reference these files in your app.

This is the easiest way to serve images, icons, and documents without extra configuration.