Static Assets and Images

⏱ Estimated reading time: 2 min

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 Case	Recommended
Optimized images	next/image
Simple icons	</></></>< data start="2093" data-end="2131">	External CMS images	next/image
SVG icons	Inline 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 ← Previous Styling in Next.js Next → Data Fetching Basics 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 Popular Competitive Exam Quizzes GK/GS Quiz | UPSC Exam Quiz | English Grammar Basics Quiz | Science Quiz