How To Import Image in Next JS From Public Folder

How To Import Image in Next JS From Public Folder

Images are a vital part of every web application — they enhance aesthetics, convey information visually, and improve user engagement. When developing applications with Next.js, you have several ways to handle and display images efficiently. One of the most straightforward and commonly used methods is importing images from the public folder.

In this comprehensive guide, you’ll learn exactly how to import an image in Next.js from the public folder, how the next/image component works, and the best practices for managing static assets. Whether you’re a beginner exploring Next.js or a professional working on scalable web apps, this tutorial will help you understand how to handle images effectively.

🧭 Understanding the Public Folder in Next.js

The public folder in Next.js serves as the root directory for all static assets such as images, icons, fonts, and videos. Any file placed inside this folder is served directly from the root of your application.

For example, if you have an image located at:

/public/images/banner.jpg

You can access it in the browser at:

http://localhost:3000/images/banner.jpg

This makes the public folder ideal for assets that don’t need to be processed or transformed at build time — such as company logos, icons, or default images.

⚙️ Why Use the Public Folder for Images?

The public folder is useful because:

1. Simple Access – Files can be accessed using absolute URLs relative to the site root.
2. No Import Required – You don’t need to import images as modules in your components.
3. Better Performance – Static assets are cached efficiently by browsers.
4. Ease of Management – It provides a centralized location for all assets, which simplifies deployment.

However, it’s important to note that images in the public folder don’t benefit from automatic optimization through the next/image component — unless you use it explicitly.

🧩 How To Import Image in Next.js From Public Folder (Basic Method)

Let’s look at the simplest way to display an image stored in the public folder.

Step 1: Add an Image to the Public Folder

Create a folder named images inside the public directory, then place your image there. For example:

/public/images/logo.png

Step 2: Use the HTML <img> Tag

You can directly reference the image path starting from the root /:

export default function Home() {
  return (
    <div>
      <h1>Welcome to My Website</h1>
      <img src="/images/logo.png" alt="Company Logo" width={200} height={100} />
    </div>
  );
}

Output

This will render your logo on the page, sourced from the public folder.

Key Note

• Always start the image path with a leading slash (/).
• You don’t need to import or require the image.
• The image is served statically and efficiently.

🚀 Using the Next.js Image Component

While using <img> works fine, Next.js provides a more powerful and optimized way to handle images using the next/image component.

This component offers several benefits, including:

• Automatic resizing and optimization
• Lazy loading by default
• Responsive images for various screen sizes
• Built-in support for modern image formats like WebP

Example: Importing Image from Public Folder Using next/image

import Image from 'next/image';

export default function Home() {
  return (
    <div>
      <h1>Our Products</h1>
      <Image
        src="/images/product.jpg"
        alt="Product Image"
        width={500}
        height={300}
        priority
      />
    </div>
  );
}

Explanation

• src: The image path from the public folder (starting with /).
• width & height: Define the rendered dimensions.
• priority: Ensures critical images (like hero banners) are loaded early.
• alt: Describes the image for accessibility and SEO.

🧠 How It Works Internally

The next/image component does not require importing files from the public folder as JavaScript modules. When you specify a path beginning with /, Next.js automatically looks for the file in the public directory.

For example:

<Image src="/team/photo.jpg" alt="Team Member" width={400} height={400} />

Next.js internally resolves this to the public folder path /public/team/photo.jpg and serves it as /team/photo.jpg.

This simplifies file management while still leveraging optimization features.

🧩 Importing Local Images (Static Import Alternative)

If your image is stored inside the src or component directory, you can import it as a module instead of using the public folder. This is different but worth understanding.

import Image from 'next/image';
import productImg from '../assets/product.jpg';

export default function Product() {
  return <Image src={productImg} alt="Product" />;
}

Here, Next.js processes the image during build time — optimizing it for different devices automatically. However, this method isn’t needed when you’re using the public folder.

🖼️ When Should You Use the Public Folder?

Use the public folder for:

• Static images that don’t change frequently.
• Global assets such as logos, icons, favicons, or backgrounds.
• External integrations or CDN-based resources.
• Files accessed outside React components (like manifest.json or robots.txt).

Avoid placing thousands of dynamically generated images in public/ — instead, serve them via an API route or use external storage (e.g., AWS S3, Cloudinary).

💡 Common Mistakes Developers Make

Here are common pitfalls to avoid when importing images from the public folder:

1. Forgetting the Leading Slash (/)

   • Incorrect: src="images/logo.png"
   • Correct: src="/images/logo.png"

2. Incorrect Folder Path

   • The path is relative to the root of the app, not the component file.

3. Using Imports for Public Assets

   • You do not need import logo from '/public/images/logo.png'.

4. Ignoring next/image Optimization

   • Use <Image> for performance-critical visuals.

5. Missing Alt Tags

   • Always include descriptive alt text for accessibility and SEO.

🧰 How To Handle Background Images from the Public Folder

Sometimes, you may want to use images as CSS backgrounds. You can still use the public folder for that.

export default function HeroSection() {
  return (
    <div
      style={{
        backgroundImage: 'url(/images/hero-bg.jpg)',
        backgroundSize: 'cover',
        backgroundPosition: 'center',
        height: '500px',
        color: '#fff',
        display: 'flex',
        alignItems: 'center',
        justifyContent: 'center',
      }}
    >
      <h1>Welcome to AAMAX</h1>
    </div>
  );
}

This approach allows you to keep your design flexible while still serving static assets efficiently.

🧩 Example Project Structure

A typical Next.js structure when using images from the public folder:

my-next-app/
├── public/
│   ├── images/
│   │   ├── logo.png
│   │   ├── banner.jpg
│   │   └── icon.png
│   ├── favicon.ico
│   └── robots.txt
├── pages/
│   ├── index.js
│   └── about.js
├── components/
│   └── HeroSection.js
├── package.json
└── next.config.js

This clean organization ensures your public assets are easily accessible and scalable.

⚡ Using Dynamic Image Paths

In some scenarios, you might need to load images dynamically from the public folder based on user input or data.

Example:

export default function Gallery({ imageName }) {
  return (
    <div>
      <Image
        src={`/images/${imageName}.jpg`}
        alt={imageName}
        width={400}
        height={300}
      />
    </div>
  );
}

If imageName equals "nature", the app loads /public/images/nature.jpg.

🛠️ Image Optimization in Next.js

Even when using the public folder, you can benefit from Next.js’s image optimization features. The next/image component automatically optimizes images on-demand, resizing them for different devices and formats.

To control optimization settings, update your next.config.js:

module.exports = {
  images: {
    formats: ['image/avif', 'image/webp'],
    deviceSizes: [640, 768, 1024, 1280, 1600],
    imageSizes: [16, 32, 48, 64, 96],
  },
};

This ensures the best balance between image quality and page speed.

🧠 SEO Considerations When Using Images

Images play a major role in SEO performance and user experience. Follow these best practices:

1. Use descriptive file names – e.g., modern-office-setup.jpg instead of img001.jpg.
2. Add alt attributes – Helps search engines understand image context.
3. Compress your images – Use tools like TinyPNG or Squoosh.
4. Serve modern formats – Use WebP or AVIF when possible.
5. Avoid oversized images – Match image dimensions to display size.

🔥 Advanced Tip: Using External Image Hosts with the Public Folder

Sometimes you may need to mix local (public folder) and external (CDN) image sources. You can configure Next.js to allow specific domains in next.config.js:

module.exports = {
  images: {
    domains: ['cdn.example.com', 'images.unsplash.com'],
  },
};

This enables you to use the <Image> component for remote images without any issues.

💼 Why Use Next.js for Image Handling?

Next.js combines the simplicity of React with built-in performance optimization tools. Its Image component and static asset management through the public folder make it perfect for high-performance applications.

You can also integrate Next.js with MERN Stack projects to build scalable, optimized web apps quickly.

If you’re building a complex web app or eCommerce project and need professional help, you can AAMAX — a full-service digital marketing and development agency specializing in MERN Stack Development, Web Development, Digital Marketing, and SEO Services. Their expert team can help you develop visually stunning, high-performance applications using Next.js and modern web technologies.

🏁 Final Thoughts

Importing images from the public folder in Next.js is one of the simplest and most reliable ways to handle static assets. It’s perfect for logos, icons, and background images that don’t require dynamic imports or transformations.

Here’s a quick recap:

• Store static images in the public/ directory.
• Use <img> for simple, static references.
• Use the next/image component for optimized rendering.
• Always start image paths with /.
• Keep file names descriptive and SEO-friendly.

With this understanding, you can efficiently manage images in your Next.js projects while maintaining fast load times and a professional user experience.

And if you want expert help building powerful Next.js or MERN-based applications, consider hiring AAMAX — your partner for cutting-edge web development and digital growth.