Next.js 15 Fullstack Web Apps · Pelajaran

Optimasi Gambar dan Font

Optimalkan gambar dengan `next/image` dan kelola font secara efisien untuk mengurangi waktu pemuatan.

Optimasi Gambar dan Font adalah pelajaran Next.js 15 Fullstack Web Apps gratis di CoddyKit. Ini adalah pelajaran 2 dari 4. Kamu bisa membaca pelajaran lengkapnya di bawah secara gratis — lalu praktikkan langsung di browser dengan editor kode bawaan dan tutor AI 24/7. Ini adalah bagian dari jalur belajar Next.js 15 Fullstack Web Apps, dan progresmu tersinkronisasi di web dan aplikasi CoddyKit. Kursus Next.js 15 Fullstack Web Apps mencakup 4 pelajaran total.

Bagian dari pelajaran ini belum diterjemahkan dan ditampilkan dalam bahasa Inggris.

Why Optimize Images & Fonts?

Optimizing images and fonts is crucial for a fast-loading website. Large files slow down your page, impacting user experience and SEO.

Faster Loading: Users don't wait for slow pages.
Improved SEO: Search engines favor faster sites.
Better UX: Smooth, responsive feel.
Lower Bandwidth: Saves data for users.

Next.js Image Component

Next.js provides a powerful next/image component. It automatically optimizes images for you, handling responsiveness, lazy loading, and format conversion to modern formats like WebP.

Using next/image ensures your images are served in the most efficient way possible, often without you needing to do manual optimization.

Using the Image Component

To use next/image, import it and then define your image's src, alt text, width, and height. The width and height are crucial for preventing layout shifts (CLS).

import Image from 'next/image';

export default function MyImage() {
  return (
    <Image
      src="/my-photo.jpg"
      alt="A descriptive alt text"
      width={500}
      height={300}
    />
  );
}

Layout Modes & Responsiveness

next/image offers different layout modes to control how images scale:

intrinsic (default): Scales down for smaller viewports, but doesn't scale up beyond its original size.
fixed: Image is fixed width and height.
fill: Image fills its parent element, useful for background images or when the image dimensions are unknown. Requires the parent to have position: relative.

Loading Priority with `priority`

For images above the fold (visible when the page first loads), you should add the priority prop. This tells Next.js to preload the image, improving your site's Largest Contentful Paint (LCP) metric.

Only use priority for critical images, like hero banners. Overusing it can negate its benefits.

import Image from 'next/image';

export default function HeroSection() {
  return (
    <Image
      src="/hero-banner.jpg"
      alt="Hero banner for the website"
      width={1200}
      height={600}
      priority
    />
  );
}

The Need for Font Optimization

Custom fonts can significantly impact performance. Large font files mean longer download times, leading to 'flash of unstyled text' (FOUT) or 'flash of invisible text' (FOIT).

Optimizing fonts reduces file size and ensures they load smoothly, improving the visual experience and preventing layout shifts.

Google Fonts with `next/font`

Next.js 15 simplifies using Google Fonts with next/font/google. It automatically self-hosts fonts, reduces layout shifts (CLS), and improves privacy by avoiding direct requests to Google.

Import your desired font, then apply it to your HTML elements.

import { Inter } from 'next/font/google';

// Configure the Inter font
const inter = Inter({ subsets: ['latin'] });

export default function MyApp({ Component, pageProps }) {
  return (
    <main className={inter.className}>
      <Component {...pageProps} />
    </main>
  );
}

Self-Hosting Local Fonts

For self-hosted fonts (fonts you provide yourself), use next/font/local. This allows you to bundle your font files directly with your application, giving you full control over their delivery.

Define your font source and apply it just like Google Fonts.

import localFont from 'next/font/local';

// Configure a local custom font
const myCustomFont = localFont({ src: './my-custom-font.woff2' });

export default function MyPage() {
  return (
    <h1 className={myCustomFont.className}>
      My Custom Title
    </h1>
  );
}

Font Loading Strategies

To further optimize font loading:

display: swap: This CSS property shows fallback text immediately while the custom font loads, preventing 'flash of invisible text' (FOIT). next/font handles this by default.
Subset Fonts: Only include the characters you need from a font to reduce file size.
Preload Critical Fonts: For your most important fonts, consider preloading them using <link rel="preload"> in your document's head.

Image Optimization Check

Which of the following are benefits of using the next/image component in a Next.js application?

Recap: Optimized for Performance

Great job! You've learned how to significantly boost your Next.js app's performance by optimizing images and fonts.

Use next/image for automatic image optimization, lazy loading, and layout shift prevention.
Leverage the priority prop for critical above-the-fold images.
Utilize next/font/google and next/font/local for efficient, self-hosted font loading, which also prevents layout shifts.

These practices lead to faster, more user-friendly applications.

Pertanyaan yang Sering Diajukan

Apakah pelajaran “Optimasi Gambar dan Font” gratis?

Ya — teks lengkap “Optimasi Gambar dan Font” gratis dibaca di sini di web. Untuk praktiknya secara interaktif (editor kode bawaan dan tutor AI 24/7) dan buka sisa kursus Next.js 15 Fullstack Web Apps, upgrade ke CoddyKit PRO. Kursus Next.js 15 Fullstack Web Apps mencakup 4 pelajaran total.

Apa yang akan aku pelajari di “Optimasi Gambar dan Font”?

Optimalkan gambar dengan `next/image` dan kelola font secara efisien untuk mengurangi waktu pemuatan. Kamu berlatih Next.js 15 Fullstack Web Apps dengan kode praktik yang langsung kamu jalankan di browser, dan tutor AI 24/7 menjawab pertanyaanmu saat kamu mengerjakan pelajaran ini.

Apakah aku perlu pengalaman untuk memulai Next.js 15 Fullstack Web Apps?

Tidak diperlukan pengalaman sebelumnya. Next.js 15 Fullstack Web Apps di CoddyKit dirancang untuk pemula hingga pelajar tingkat lanjut, jadi kamu bisa memulai di sini atau dari awal dan belajar sesuai kecepatan kamu sendiri. Ini adalah pelajaran 2 dari 4.

Berapa lama pelajaran “Optimasi Gambar dan Font” memakan waktu?

Sebagian besar pelajaran CoddyKit memakan waktu sekitar 5–10 menit. Setiap pelajaran ringkas dan interaktif, jadi kamu membuat kemajuan stabil dan melanjutkan dari tempat kamu tinggalkan di web dan aplikasi.

Bisakah aku menulis dan menjalankan kode dalam pelajaran Next.js 15 Fullstack Web Apps ini?

Ya. Setiap pelajaran Next.js 15 Fullstack Web Apps menyertakan editor kode bawaan, jadi kamu menulis dan menjalankan kode nyata langsung di browser dan mendapatkan umpan balik AI instan — tidak diperlukan penyiapan lokal.

Semua pelajaran dalam kursus ini

← Kembali ke Next.js 15 Fullstack Web Apps