Challenge - 5 Problems
Public Directory Pro
Get all challenges correct to earn this badge!
Test your skills under time pressure!
❓ component_behavior
intermediate2:00remaining
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" />
Attempts:
2 left
💡 Hint
Files in the public folder are served from the root URL path.
✗ Incorrect
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
intermediate2:00remaining
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" />
Attempts:
2 left
💡 Hint
Remember how public folder files are served in Next.js.
✗ Incorrect
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
advanced2:00remaining
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" />
Attempts:
2 left
💡 Hint
Check the file name and location carefully.
✗ Incorrect
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
advanced2:00remaining
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?Attempts:
2 left
💡 Hint
Think about how static assets should be served.
✗ Incorrect
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
expert2:00remaining
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?Attempts:
2 left
💡 Hint
Consider how Next.js watches files in the public folder during development.
✗ Incorrect
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.