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?

**Target Audience:** Frontend engineers preparing for Next.js interviews — assumes basic React and App Router familiarity. **Difficulty:** Easy > **How to read this doc:** Each idea is explained in plain language first, then tagged with `📌 Interview term:`. Every behaviour claim was checked against the Next.js docs shipped with the package (written on 16.3.4, re-reviewed against 16.4.2) and, in the **Verified** section, against real output from a build or a running server; each Verified block says which version it ran on. ## 1. Why This Even Matters — A Story First The public folder is the shop window: items are displayed at a fixed spot and anyone can point at them, but you must check them often because they might change. Imported assets are items with a batch number stamped on them: a new version gets a new number, so a customer who has batch 12 knows it will never change and can keep it forever. ## 2. The Core Idea 📌 **Interview term: public folder** — a directory whose files

The problem

Question presented to candidate: "Where should images, fonts and other static files live in a Next.js app: the public folder, or imported from code? What difference does it make?"

What a strong answer should cover:

Files in public/ are served from the site root at a fixed URL (public/logo.png becomes /logo.png), exactly as they are.
Because the URL never changes, they cannot be cached forever: Next.js serves them with max-age=0 so updates are picked up.
Imported assets (import logo from "./logo.png") are copied to /_next/static/media/ with a content hash and served with a one-year immutable cache.
Imported images also give next/image their width, height and a blur placeholder automatically.
Use public/ for files that need a stable URL: robots.txt, favicons, verification files, assets referenced by third parties.

Clarifying questions expected:

"Does anything outside the app need a stable URL for this file?" — then public/.
"Is it an image used in components?" — import it for hashing and dimensions.

Code / implementation expected: Yes — the same image both ways.

nextjs
public
assets
static-files

Try it yourself

Sketch your approach before you read the solution. That is what the interview tests.

Stuck? Get a hint.

A short nudge toward the approach. It will not give the answer away.

Solution

Target Audience: Frontend engineers preparing for Next.js interviews — assumes basic React and App Router familiarity. Difficulty: Easy

How to read this doc: Each idea is explained in plain language first, then tagged with 📌 Interview term:. Every behaviour claim was checked against the Next.js docs shipped with the package (written on 16.3.4, re-reviewed against 16.4.2) and, in the Verified section, against real output from a build or a running server; each Verified block says which version it ran on.

1. Why This Even Matters — A Story First

The public folder is the shop window: items are displayed at a fixed spot and anyone can point at them, but you must check them often because they might change. Imported assets are items with a batch number stamped on them: a new version gets a new number, so a customer who has batch 12 knows it will never change and can k

The solution is hidden so you can try first

4 min read · 8 sections

Read the code

The same image from public and as an import

import Image from "next/image";
import logo from "./logo.png"; // hashed URL, dimensions and blur placeholder known at build time

export function Header() {
  return (
    <header>
      <Image src={logo} alt="Company" placeholder="blur" />
      {/* public/partner-badge.png: stable URL, dimensions must be given */}
      <Image src="/partner-badge.png" alt="Partner" width={120} height={40} />
    </header>
  );
}

Discussion

Other approaches, follow-ups and how it went in real interviews.

Sign in to join the discussion.

No comments yet. Share how you would answer it.

The solution is hidden so you can try first

Keep your momentum going.