Public directory for static files in NextJS - Practice Problems & Coding Challenges

Challenge - 5 Problems

❓ component_behavior

intermediate

Accessing static files from the public directory

In a Next.js app, you place an image named logo.png inside the public folder. What URL path should you use in an <img> tag to display this image correctly?

NextJS

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

A <img src="/logo.png" alt="Logo" />

B <img src="/public/logo.png" alt="Logo" />

C <img src="/static/logo.png" alt="Logo" />

D <img src="logo.png" alt="Logo" />

💡 Hint

Files in the public folder are served from the root URL path.

In Next.js, files inside the public directory are served at the root path. So to access logo.png, you use /logo.png in the src attribute.

📝 Syntax

intermediate

Correct usage of public directory for CSS file

You want to include a CSS file named styles.css located in the public folder in your Next.js app. Which is the correct way to link it in the <head> of your page?

NextJS

<link rel="stylesheet" href="/styles.css" />

A <link rel="stylesheet" href="/styles.css" />

B <link rel="stylesheet" href="styles.css" />

C <link rel="stylesheet" href="/public/styles.css" />

D <link rel="stylesheet" href="/static/styles.css" />

💡 Hint

Remember how public folder files are served in Next.js.

Files in the public folder are served from the root URL path, so the href should start with a slash and the file name.

🔧 Debug

advanced

Why does this image not load from public directory?

You placed banner.jpg inside the public/images folder. Your component uses <img src="/images/banner.jpg" alt="Banner" /> but the image does not show. What is the most likely cause?

NextJS

<img src="/images/banner.jpg" alt="Banner" />

A The image path is correct; the problem is the image file is corrupted.

B You must import the image in the component to use it.

C The public folder is not for images; images must be in the static folder.

D The image path is correct; the problem is the image file is missing or misnamed.

💡 Hint

Check the file name and location carefully.

If the image path matches the public folder structure but the image does not show, the file might be missing or the name might have a typo or wrong case.

🧠 Conceptual

advanced

Behavior of files in public directory during build

What happens to files inside the public directory when you build and deploy a Next.js app?

A They are ignored and not included in the build output.

B They are bundled and minified into JavaScript files.

C They are copied as-is to the root of the deployed site and served statically.

D They are moved to the <code>_next/static</code> folder and renamed.

💡 Hint

Think about how static assets should be served.

Next.js copies the public folder contents directly to the root of the deployed site so they can be served as static files without processing.

❓ state_output

expert

Effect of modifying files in public directory on hot reload

You are running a Next.js development server. You add a new file icon.svg to the public folder. What happens immediately in the browser?

A The browser automatically reloads and shows the new file if referenced.

B The browser does not reload; you must refresh manually to see the new file.

C Next.js throws an error because public folder changes are not allowed during dev.

D The development server crashes and restarts.

💡 Hint

Consider how Next.js watches files in the public folder during development.

Next.js does not watch the public folder for changes to trigger hot reload. You must refresh the browser manually to see new or changed files in public.

Practice

1. What is the main purpose of the public directory in a Next.js project?

easy

A. To keep React components for rendering

B. To hold server-side API route files

C. To store static files like images and icons accessible via URL paths

D. To store environment configuration files

Solution

1. Step 1: Understand the role of the public directory

   The public folder is designed to hold static files such as images, icons, and documents.

2. Step 2: Recognize how files in public are accessed

   Files inside public are accessible directly via URL paths starting with /.

3. Final Answer:

   To store static files like images and icons accessible via URL paths -> Option C

4. Quick Check:

   public folder = static files access [OK]

Hint: Remember: public folder serves static files directly via URLs [OK]

Common Mistakes:

• Confusing public with components folder
• Thinking public holds API routes
• Assuming public stores config files

2. Which of the following is the correct way to reference an image named logo.png stored inside the public folder in a Next.js component?

easy

A. <img src="/logo.png" alt="Logo" />

B. <img src="../public/logo.png" alt="Logo" />

C. <img src="./logo.png" alt="Logo" />

D. <img src="public/logo.png" alt="Logo" />

Solution

1. Step 1: Understand URL referencing for public files

   Files in the public folder are referenced by their path starting with /, without including the folder name.

2. Step 2: Apply correct src attribute

   To reference logo.png in public, use /logo.png as the src value.

3. Final Answer:

   <img src="/logo.png" alt="Logo" /> -> Option A

4. Quick Check:

   Use leading slash and omit 'public' folder name [OK]

Hint: Use src starting with '/' and omit 'public' folder name [OK]

Common Mistakes:

• Including 'public' in the path
• Using relative paths like './' or '../'
• Forgetting the leading slash

3. Given the following Next.js component code, what will be the rendered image URL in the browser?

export default function Logo() {
  return <img src="/images/avatar.png" alt="User Avatar" />
}

Assuming avatar.png is located inside public/images folder.

medium

A. http://localhost:3000/src/images/avatar.png

B. http://localhost:3000/public/images/avatar.png

C. http://localhost:3000/avatar.png

D. http://localhost:3000/images/avatar.png

Solution

1. Step 1: Understand public folder URL mapping

   Files inside public are served from the root URL path, so /images/avatar.png maps to public/images/avatar.png.

2. Step 2: Determine the full URL

   When running locally, the base URL is http://localhost:3000, so the full URL is http://localhost:3000/images/avatar.png.

3. Final Answer:

   http://localhost:3000/images/avatar.png -> Option D

4. Quick Check:

   public/images/avatar.png = /images/avatar.png URL [OK]

Hint: Files in public map directly to root URL paths [OK]

Common Mistakes:

• Adding 'public' to URL path
• Using relative or src folder paths
• Confusing file location with URL

4. You added a file favicon.ico inside the public folder but your browser shows a 404 error when accessing /favicon.ico. What is the most likely cause?

medium

A. The file is inside a subfolder of public but URL does not include it

B. The file name is misspelled or has wrong extension

C. Next.js requires importing favicon in _app.js to serve it

D. You need to restart the Next.js server after adding files to public

Solution

1. Step 1: Check file location and URL path

   If the file is directly inside public, accessing /favicon.ico should work unless the file name or extension is incorrect.

2. Step 2: Verify file name and extension

   A common cause of 404 is a misspelled file name or wrong extension like favicon.ico.png or fav-icon.ico.

3. Final Answer:

   The file name is misspelled or has wrong extension -> Option B

4. Quick Check:

   Check exact file name and extension for 404 errors [OK]

Hint: Check exact file name and extension if 404 occurs [OK]

Common Mistakes:

• Assuming Next.js needs imports for public files
• Forgetting to include subfolder in URL
• Restarting server unnecessarily

5. You want to serve a PDF file named guide.pdf stored in public/docs so users can download it by clicking a link. Which is the correct way to create the link in a Next.js component?

hard

A. <a href="/docs/guide.pdf" download>Download Guide</a>

B. <a href="docs/guide.pdf" download>Download Guide</a>

C. <Link href="/docs/guide.pdf">Download Guide</Link>

D. <a href="/public/docs/guide.pdf" download>Download Guide</a>

Solution

1. Step 1: Reference public files with leading slash and no 'public' folder name

   Files inside public are accessed by URL paths starting with / and omit the public folder name.

2. Step 2: Use anchor tag with download attribute for file download

   To allow users to download the PDF, use an <a> tag with href="/docs/guide.pdf" and the download attribute.

3. Final Answer:

   <a href="/docs/guide.pdf" download>Download Guide</a> -> Option A

4. Quick Check:

   Use leading slash and download attribute on anchor tag [OK]

Hint: Use <a> with href starting '/' and download attribute [OK]

Common Mistakes:

• Omitting leading slash in href
• Including 'public' in URL path
• Using Next.js Link for static file downloads