easyFrontend

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

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

**TL;DR.** 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. /public served raw at /file no hashing/optimization robots, favicon <text class='d-text' x='340'

734 views

Understand the problem

Static file serving vs build-pipeline assets.

nextjspublicassetsstatic-files

Attempt it yourself

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

Stuck? AI Nudge Available

Get a conceptual hint to guide your logic without spoiling the final implementation.

Study the solution

The solution is waiting

Give it an honest attempt first — then compare your thinking with the full walkthrough.

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" />;

Join the discussion

Discussion (0)

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

What is not-found.js in Next.js and how do you trigger a 404?

How do sitemap.ts and robots.ts work in Next.js?