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

Need a 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

Need a 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 */}
    
  )
}

Need a 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 */}
    
  )
}

Need a hint?

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