How to serve static files in Next.js?

Using the public folder for static assets.

What You'll Learn

Public folder usage
Accessing static files
Best practices

Public Folder

code.jsJavaScript

public/
├── images/
│   ├── logo.png
│   └── hero.jpg
├── fonts/
│   └── custom.woff2
├── favicon.ico
└── robots.txt

Accessing Files

code.txtTSX

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

// In CSS
background-image: url('/images/hero.jpg');

With Image Component

code.txtTSX

import Image from 'next/image';

// Public folder images
<Image src="/images/logo.png" alt="Logo" width={100} height={50} />

Static File Types

Good for:

favicon.ico
robots.txt
sitemap.xml
manifest.json
Static images/fonts

Best Practices

code.txtTSX

// ✅ Use Image component for optimization
import Image from 'next/image';
<Image src="/photo.jpg" ... />

// ❌ Avoid for large images
<img src="/large-photo.jpg" />

What are Client Components in Next.js?

How to handle redirects in Next.js?