Today's Daily Quiz is Live — Test your knowledge & improve your rank
|
Next.js

Static Assets and Images

Next.js 137 views Dec 22, 2025 2 min read

Next.js provides an efficient way to manage static assets like images, fonts, icons, and videos, along with powerful built-in image optimization for better performance.

1. Static Assets in Next.js

Static assets are stored in the public/ folder.
Files inside this folder can be accessed directly via the browser.

Example Structure

public/
├── images/
│   └── logo.png
├── icons/
│   └── favicon.ico
└── fonts/

Usage

<>< class>"/images/logo.png" alt="Logo" />

  • No import required

  • Path starts from /public

  • Best for static files

2. Using the Next.js Image Component

Next.js provides the Image component from next/image for automatic image optimization.

Basic Example

import Image from 'next/image';

export default function Home() {
  return (
    <Image
      src="/images/banner.jpg"
      alt="Banner"
      width={600}
      height={300}
    />
  );
}

Benefits

  • Automatic image optimization

  • Responsive images

  • Lazy loading by default

  • Improved performance and Core Web Vitals

3. Remote Images

You can also load images from external URLs.

<Image
  src="https://example.com/image.jpg"
  alt="Remote Image"
  width={500}
  height={300}
/>

External domains must be allowed in next.config.js.

4. Image Layout Options

Responsive Image

<Image
  src="/images/photo.jpg"
  alt="Photo"
  fill
  style={{ objectFit: 'cover' }}
/>

The parent container must have position: relative.

5. Priority Images

Use priority for above-the-fold images.

<Image
  src="/images/hero.jpg"
  alt="Hero"
  width={800}
  height={400}
  priority
/>

6. Static Files Other Than Images

You can serve:

  • PDFs

  • Videos

  • Audio files

  • JSON files

Example:

"/files/sample.pdf">Download PDF

7. When to Use </> data-start="1967" data-end="1976">

Use CaseRecommended
Optimized imagesnext/image
Simple icons</></></>< data start="2093" data-end="2131">External CMS imagesnext/image
SVG iconsInline or </></></></></></></>< data start="2167" data-end="2170">

Conclusion

Next.js makes handling static assets and images easy and performance-friendly. By using the public/ folder and the Image component, you can significantly improve loading speed and user experience.

Some advanced sections are available for Registered Members
Register Now
Share this Post
🚀 Want to Test Your Knowledge?

Take quizzes related to this topic and see where you stand!

Start Quiz Now
Back to Tutorials