Public directory for static files in NextJS - Mini Project: Build & Apply

Using the Public Directory for Static Files in Next.js

📖 Scenario: You are building a simple Next.js website that needs to show a logo image on the homepage. The image file will be stored in the public directory, which is the special folder for static files like images, icons, and fonts.

🎯 Goal: Learn how to place an image file in the public directory and display it on a Next.js page using the Image component with the correct path.

📋 What You'll Learn

Create a public directory in the Next.js project root

Add an image file named logo.png inside the public directory

Create a Next.js page component that imports Image from next/image

Use the Image component to display logo.png from the public folder with alt text

💡 Why This Matters

🌍 Real World

Websites often need to serve images and static files efficiently. The public directory in Next.js is the standard way to do this.

💼 Career

Knowing how to manage static assets and use Next.js Image optimization is important for frontend developers working with React and Next.js.

1

Create the public directory and add the image

Create a folder named public in the project root and add an image file named logo.png inside it. This step is done outside the code editor.

NextJS

# This step is done outside the editor by adding the 'public/logo.png' file
# Your code here

Hint

Use your file explorer or terminal to create the public folder and place logo.png inside it.

2

Import the Image component

In the pages/index.js file, import the Image component from next/image by writing import Image from 'next/image'.

NextJS

import Image from 'next/image'

// Your code here

Hint

The Image component helps optimize images in Next.js.

3

Add the Image component to the page

Create a default exported function component named Home that returns JSX with the Image component. Use src="/logo.png", alt="Company Logo", width={200}, and height={100} as props inside the Image component.

NextJS

import Image from 'next/image'

export default function Home() {
  return (
    
      {/* Add Image component here */}
    
  )
}

Hint

The src path starts with a slash because it refers to the public folder root.

4

Complete the page with semantic HTML

Wrap the Image component inside a <main> tag and add a heading <h1>Welcome to Our Site</h1> above the image inside the Home component's return statement.

NextJS

import Image from 'next/image'

export default function Home() {
  return (
    
      {/* Add heading and Image component here */}
    
  )
}

Hint

Using semantic tags like <main> and headings improves accessibility.

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