Public directory for static files in NextJS - Performance & Optimization

Performance: Public directory for static files

MEDIUM IMPACT

This affects page load speed by serving static assets directly without server processing, improving initial content display.

Serving images and static assets in a Next.js app

NextJS

export default function Header() {
  return <img src="/logo.png" alt="Logo" />;
}

Using the public directory serves the image as a separate static file, allowing the browser to load it early and cache it independently.

📈 Performance GainReduces JS bundle size by 50-100kb, enables parallel asset loading

Serving images and static assets in a Next.js app

NextJS

import logo from '../assets/logo.png';
export default function Header() {
  return <img src={logo} alt="Logo" />;
}

Importing static files directly bundles them into JavaScript, increasing bundle size and delaying image load until JS parses.

📉 Performance CostAdds 50-100kb to JS bundle, blocking rendering until JS loads

Performance Comparison

Pattern	DOM Operations	Reflows	Paint Cost	Verdict
Importing static files in JS bundle	Minimal	0	High due to delayed image load	[X] Bad
Serving static files from public directory	Minimal	0	Low, images load early	[OK] Good

Rendering Pipeline

Static files in the public directory are served directly by the server or CDN, bypassing JavaScript parsing and allowing the browser to fetch assets in parallel with HTML.

→Network Request

→Resource Fetching

→Paint

⚠️ BottleneckBlocking JS parsing when assets are bundled inside JS

Core Web Vital Affected

LCP

This affects page load speed by serving static assets directly without server processing, improving initial content display.

Optimization Tips

1Always place static assets like images and fonts in the public directory for direct serving.

2Avoid importing static files into JavaScript bundles to keep bundle size small.

3Use absolute paths starting with '/' to reference public directory files in your components.

Performance Quiz - 3 Questions

What is the main performance benefit of using the public directory for static files in Next.js?

A Static files are bundled inside JavaScript for faster parsing

B Static files are converted to inline base64 strings

C Static files load separately and can be cached independently

D Static files are loaded only after user interaction

DevTools: Network

How to check: Open DevTools, go to Network tab, reload page, filter by 'img' or static file types, and check if images load as separate requests.

What to look for: Look for images served with status 200 as separate requests, not bundled inside JS files, and check load timing to confirm early fetch.