Public directory for static files in NextJS - Step-by-Step Execution

Concept Flow - Public directory for static files

Place files in /public folder

↓

Next.js builds app

↓

Files copied as-is to root URL

↓

Access files via /filename.ext URL

↓

Browser loads static file directly

Files placed in the /public folder are served directly at the root URL path, allowing easy access to static assets.

Execution Sample

NextJS

public/
  logo.png

In component:
<img src="/logo.png" alt="Logo" />

This shows placing an image in the public folder and referencing it with a root-relative URL in a component.

Execution Table

Step	Action	File Location	URL Accessed	Result
1	Place logo.png in /public folder	/public/logo.png	N/A	File ready for serving
2	Next.js build copies /public files	/public/logo.png	N/A	File available at root URL
3	Component uses <img src="/logo.png" />	N/A	/logo.png	Browser requests /logo.png
4	Server serves static file	/public/logo.png	/logo.png	Image loads in browser
5	User sees image on page	N/A	N/A	Static image displayed
6	Try accessing /logo.png directly	N/A	/logo.png	Image loads without app code
7	Try accessing file not in /public	N/A	/notfound.png	404 error - file not found

💡 Static files must be in /public to be served; otherwise, 404 occurs.

Variable Tracker

Variable	Start	After Step 1	After Step 2	After Step 4	Final
File location	N/A	/public/logo.png	/public/logo.png	/public/logo.png	/public/logo.png
URL accessed	N/A	N/A	N/A	/logo.png	/logo.png
File served	No	No	Yes	Yes	Yes

Key Moments - 2 Insights

Why can't I access a static file if it's not in the /public folder?

Only files inside /public are served as static assets. Files outside are not copied to the root URL, so accessing them returns 404 (see execution_table step 7).

How do I reference a static file in my component?

Use a root-relative URL starting with a slash, like /logo.png, matching the file name in /public (see execution_table step 3).

Visual Quiz - 3 Questions

Look at the execution table, at which step does the browser request the static file URL?

A Step 3

B Step 2

C Step 5

D Step 7

💡 Hint

Check the 'URL Accessed' column to see when /logo.png is requested.

According to the variable tracker, what is the file location after step 2?

A N/A

B /public/logo.png

C /logo.png

D /notfound.png

💡 Hint

Look at the 'File location' row under 'After Step 2' in variable_tracker.

If you place a file outside /public, what will happen when you try to access it via URL?

A It will load normally

B It will redirect to homepage

C It will return 404 error

D It will download automatically

💡 Hint

See execution_table step 7 for what happens when file is not in /public.

Concept Snapshot

Next.js serves static files from the /public folder.
Files placed here are accessible at root URL paths.
Reference them with root-relative URLs like /file.ext.
Files outside /public are not served and cause 404 errors.
Use /public for images, fonts, and other static assets.

Full Transcript

In Next.js, the public directory is a special folder where you put static files like images or fonts. When you build your app, Next.js copies these files so they are available at the root URL path. For example, if you put logo.png inside the public folder, you can access it in your app with the URL /logo.png. This means in your component you write <img src="/logo.png" alt="Logo" />. The browser will request /logo.png, and the server will serve the static file directly. If you try to access a file not inside the public folder, Next.js will not serve it and you will get a 404 error. This setup makes it easy to manage static assets and reference them consistently in your app.