Public directory for static files in NextJS - Interactive Code Practice

Practice - 5 Tasks

1fill in blank

easy

Complete the code to access a static image from the public directory in Next.js.

NextJS

<img src="/[1]" alt="Logo" />

Drag options to blanks, or click blank then click option'

Apublic/logo.png

Blogo.png

C/logo.png

Dstatic/logo.png

Attempts:

3 left

💡 Hint

Common Mistakes

Including 'public/' in the src path like 'public/logo.png'

Using relative paths like './logo.png' instead of root-based paths

Files in the public folder are served from the root URL. So to access public/logo.png, use /logo.png in the src attribute.

2fill in blank

medium

Complete the code to link a CSS file located in the public directory inside the <head> of a Next.js page.

NextJS

<head>
  <link rel="stylesheet" href="/[1]" />
</head>

Drag options to blanks, or click blank then click option'

Astyles.css

Bcss/styles.css

Cpublic/styles.css

D/styles.css

Attempts:

3 left

💡 Hint

Common Mistakes

Adding 'public/' prefix in href

Using relative paths like './styles.css'

Files in the public folder are accessed from the root URL. So public/styles.css is linked as /styles.css.

3fill in blank

hard

Fix the error in the code to correctly reference a JSON file in the public directory.

NextJS

fetch('/[1]')
  .then(res => res.json())
  .then(data => console.log(data))

Drag options to blanks, or click blank then click option'

Apublic/data.json

Bdata.json

C/data.json

Djson/data.json

Attempts:

3 left

💡 Hint

Common Mistakes

Including 'public/' in the fetch URL

Using relative paths like './data.json'

When fetching files from the public folder, use the root-relative path without 'public/'. So data.json is accessed as /data.json in fetch.

4fill in blank

hard

Fill both blanks to create a link to a PDF file in the public directory and set it to open in a new tab.

NextJS

<a href="/[1]" target="[2]" rel="noopener noreferrer">Download PDF</a>

Drag options to blanks, or click blank then click option'

Afiles/manual.pdf

B_blank

C_self

Dmanual.pdf

Attempts:

3 left

💡 Hint

Common Mistakes

Using relative paths without leading slash

Forgetting to set target to '_blank' for new tab

The href should point to the file path inside public, here 'files/manual.pdf'. To open in a new tab, use target="_blank" and add rel="noopener noreferrer" for security.

5fill in blank

hard

Fill all three blanks to create an image tag that loads a picture from the public folder, sets alt text, and adds a CSS class.

NextJS

<img src="/[1]" alt="[2]" className="[3]" />

Drag options to blanks, or click blank then click option'

Aimages/photo.jpg

BA beautiful scenery

Cphoto-style

Dphoto.jpg

Attempts:

3 left

💡 Hint

Common Mistakes

Using relative paths without leading slash

Leaving alt attribute empty

Using 'class' instead of 'className' in JSX

The src should be the path inside public, here 'images/photo.jpg'. The alt attribute describes the image for accessibility. The className adds styling with the CSS class 'photo-style'.

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