The <Image> component is an advanced version of the conventional HTML <img> tag that offers a range of automatic optimizations. It has been designed to address the complexities of modern web design and ensures a visually stable user experience by mitigating layout shifts during the loading phase. The component also resizes images intelligently, which reduces bandwidth consumption on devices with smaller viewports, thus optimizing content delivery.

By default, the Image component uses lazy loading, which helps improve page loading performance by fetching images only as they enter the user's viewport.

Additionally, it supports forward-thinking image formats such as WebP and AVIF, which dynamically adapts to the capabilities of the user's browser, resulting in faster load times and enhanced image quality.

Back to the Project

Let's check out how to incorporate images into our project. In the public folder, you'll find hero-desktop.png and hero-mobile.png. It's time to include them in our app/page.tsx file using the Image component from next/image.

app/page.tsx

// ...
import { rubik } from "./ui/fonts";
import Image from "next/image";

export default function Page() {
  return (
    <main className="flex min-h-screen flex-col bg-black p-6">
      {/* ... */}
      <div className="mt-4 flex grow flex-col gap-4 md:flex-row ">
        {/* ... */}
        <div className="flex items-center justify-center p-6 md:w-3/5 md:px-28 md:py-12">
          <Image
            src="/hero-desktop.png"
            width={1000}
            height={686}
            className="hidden md:block"
            alt="Desktop App Logo"
          />
        </div>
      </div>
    </main>
  );
}

Upon navigating to the app's home page, the image should be visible.

For the mobile version, add another image with a width of 560px and a height of 620px. If you encounter any issues, refer to the provided solution below.

app/page.tsx

// ...
import { rubik } from "./ui/fonts";
import Image from "next/image";

export default function Page() {
  return (
    <main className="flex min-h-screen flex-col bg-black p-6">
      {/* ... */}
      <div className="mt-4 flex grow flex-col gap-4 md:flex-row ">
        {/* ... */}
        <div className="flex items-center justify-center p-6 md:w-3/5 md:px-28 md:py-12">
          <Image
            src="/hero-desktop.png"
            width={1000}
            height={686}
            className="hidden md:block"
            alt="Desktop App Logo"
          />
          <Image
            src="/hero-mobile.png"
            width={560}
            height={620}
            className="block md:hidden"
            alt="Mobile App Logo"
          />
        </div>
      </div>
    </main>
  );
}

In Practice

Everything was clear?

Section 2. Chapter 10

Course Content

Next.js 14

1. Introduction

Welcome Project Overview Course Prerequisites How the Course Works

2. Basic Concepts

Project Set Up Project File-Folder Strcture Styling Approaches Adding the Global CSS File Tailwind Styling CSS Modules Conditionally Applying Styles Custom Google Fonts Challenge: Adding Custom Google Font Images

3. Pages and Layouts

How Routing Works Challenge: Creating Page Creating a Common Layout Navigation Optimization Creating Active Links

4. Deployment and Database

Accounts Set Up Project Deployment Project Database Data Population

5. Working with Data

How to Fetch Data Working with the Dashboard Page Practice and Challenge: Retrieving Data Dynamic vs Static Rendering Loaders Specific Parts Loaders Challenge: Skeleton Loader Grouping Components for Loaders

6. Advanced Features

Invoices Page Search Functionality Pagination Server Actions Creating Item Updating Item Deleting Item Challenge: Form Validation

7. Authentication

Understanding Authentication Login Route NextAuth.js Authentication Configuration & Route Protection Password Hashing & Credentials Sign-in Functionality Connecting UI & Functionality Logout Functionality What's Next?

Next.js 14

Images

Images play a significant role in the visual appearance of any website. Let's focus on how to add them in Next.js.

Back to the Project

app/page.tsx

// ...
import { rubik } from "./ui/fonts";
import Image from "next/image";

export default function Page() {
  return (
    <main className="flex min-h-screen flex-col bg-black p-6">
      {/* ... */}
      <div className="mt-4 flex grow flex-col gap-4 md:flex-row ">
        {/* ... */}
        <div className="flex items-center justify-center p-6 md:w-3/5 md:px-28 md:py-12">
          <Image
            src="/hero-desktop.png"
            width={1000}
            height={686}
            className="hidden md:block"
            alt="Desktop App Logo"
          />
        </div>
      </div>
    </main>
  );
}

Upon navigating to the app's home page, the image should be visible.

For the mobile version, add another image with a width of 560px and a height of 620px. If you encounter any issues, refer to the provided solution below.

app/page.tsx

// ...
import { rubik } from "./ui/fonts";
import Image from "next/image";

export default function Page() {
  return (
    <main className="flex min-h-screen flex-col bg-black p-6">
      {/* ... */}
      <div className="mt-4 flex grow flex-col gap-4 md:flex-row ">
        {/* ... */}
        <div className="flex items-center justify-center p-6 md:w-3/5 md:px-28 md:py-12">
          <Image
            src="/hero-desktop.png"
            width={1000}
            height={686}
            className="hidden md:block"
            alt="Desktop App Logo"
          />
          <Image
            src="/hero-mobile.png"
            width={560}
            height={620}
            className="block md:hidden"
            alt="Mobile App Logo"
          />
        </div>
      </div>
    </main>
  );
}

In Practice

Everything was clear?

Section 2. Chapter 10