Sign in
Skip to solution
easyFrontend

What is the difference between the /public folder and imported assets in Next.js?

734 views
01

Understand the problem

Static file serving vs build-pipeline assets.

nextjspublicassetsstatic-files
02

Attempt it yourself

Sketch your approach before reading the solution — that's what interviews test.

Nudge consolestandby

Stuck? Beam a request up — the console returns a conceptual nudge that guides your logic without spoiling the implementation.

03

Study the solution

Files in /public are served as-is from the root URL (e.g. /logo.png) with no processing — good for robots.txt, favicons. Imported assets (import img from './a.png') go through the build pipeline, get hashed filenames and optimization, and enable next/image features.

Solution ready — 2 min read

Classified // press E to declassify

04

Read the code

Both approaches
// /public — fixed URL, served raw
<link rel="icon" href="/favicon.ico" />;

// imported — hashed, optimized, gives dimensions to next/image
import hero from './hero.png';
import Image from 'next/image';
<Image src={hero} alt="Hero" placeholder="blur" />;
05

Join the discussion

Discussion (0)

Sign in to join the discussion.

No responses yet. Be the first to share what you think.

Transmission complete // awaiting log

KEEP THE
STREAK ALIVE.

Dossier 8 of 95 decoded in the Next.js track. One more won't hurt.

Back to track