Next.js 15 Fullstack (App Router + Server Actions) · Pelajaran

Optimasi Gambar & Font

Manfaatkan komponen Image dan Font bawaan Next.js untuk optimasi otomatis dan peningkatan kinerja pemuatan.

Pelajaran 1 dari 411 langkah

Optimasi Gambar & Font adalah pelajaran Next.js 15 Fullstack (App Router + Server Actions) gratis di CoddyKit. Ini adalah pelajaran 1 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 (App Router + Server Actions), dan progresmu tersinkronisasi di web dan aplikasi CoddyKit. Kursus Next.js 15 Fullstack (App Router + Server Actions) mencakup 4 pelajaran total.

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

Why Optimize Assets?

Web performance is crucial for user experience and SEO. Large images and unoptimized fonts can significantly slow down your website.

Next.js provides built-in components to automatically optimize these assets, making your applications faster and more efficient.

Image Loading Challenges

Traditionally, developers face challenges with images:

Large File Sizes: Slow downloads, high bandwidth usage.
Incorrect Dimensions: Serving huge images to small screens.
Layout Shifts (CLS): Images loading late, pushing content around.
Accessibility: Missing alt attributes.

Meet `next/image`

Next.js's Image component (from next/image) is a powerful tool designed to solve these problems automatically. It handles:

Automatic Optimization: Converts images to modern formats like WebP.
Responsive Sizing: Serves different image sizes based on device.
Lazy Loading: Loads images only when they enter the viewport.
Preventing CLS: Ensures images occupy space before loading.

Basic `next/image` Usage

To use Image, simply import it and replace your standard <img> tags. You must provide width, height, and alt props.

Try running this example (assuming /my-image.jpg is in your public folder):

import Image from 'next/image';

export default function HomePage() {
  return (
    <div>
      <h1>Optimized Image</h1>
      <Image
        src="/my-image.jpg"
        alt="A beautiful landscape"
        width={500}
        height={300}
      />
      <p>This image is now optimized!</p>
    </div>
  );
}

Key Image Props

Let's look at essential props for the Image component:

src: Path to your image (local or external).
alt: Crucial for accessibility and SEO.
width, height: Specify intrinsic dimensions to prevent layout shifts.
priority: (Optional) Load image immediately if it's above the fold.

Image Layout with `fill`

For images that should fill their parent container, use the fill prop. This is great for hero images or backgrounds.

The parent element needs position: 'relative' to act as the container for the filled image.

import Image from 'next/image';

export default function Banner() {
  return (
    <div style={{
      position: 'relative',
      width: '100%',
      height: '200px',
      backgroundColor: '#eee'
    }}>
      <Image
        src="/banner.jpg"
        alt="Website banner"
        fill
        style={{ objectFit: 'cover' }}
        sizes="(max-width: 768px) 100vw, 50vw"
      />
      <h2 style={{ position: 'absolute', color: 'white', zIndex: 10 }}>
        Awesome Banner
      </h2>
    </div>
  );
}

The Need for Font Optimization

Custom fonts add personality to your site, but they can be large files, leading to performance issues like:

FOIT (Flash of Invisible Text): Text is invisible until the font loads.
FOUT (Flash of Unstyled Text): Text displays in a default font, then switches.
Large Bundles: Font files increase overall page weight.

Next.js's next/font module helps tackle these challenges.

Optimizing Google Fonts

next/font/google automatically optimizes Google Fonts, downloading them at build time and self-hosting them with strong caching. This eliminates external network requests and ensures consistent loading.

Apply the font's class name to your HTML or a specific element:

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

const inter = Inter({
  subsets: ['latin'],
  display: 'swap', // Prevents FOIT
});

export default function AppLayout({ children }) {
  return (
    <html lang="en" className={inter.className}>
      <body>
        <h1>My App Header</h1>
        {children}
      </body>
    </html>
  );
}

Using Local Fonts

For self-hosted fonts (fonts you provide), use next/font/local. It works similarly to next/font/google, optimizing the font loading process for your local files.

Place your font files (e.g., .woff2) in the public directory or a dedicated fonts folder.

import localFont from 'next/font/local';

const myCustomFont = localFont({
  src: './fonts/MyCustomFont.woff2',
  display: 'swap',
});

export default function AboutPage() {
  return (
    <div className={myCustomFont.className}>
      <h2>About Us</h2>
      <p>This page uses a custom font.</p>
    </div>
  );
}

Optimize Your Assets

Which of the following are benefits of using Next.js's Image and Font components for asset optimization?

Jawab di pelajaran interaktif

Recap: Optimized Assets

You've learned how Next.js empowers you to optimize critical assets like images and fonts:

The next/image component offers automatic optimization, lazy loading, and CLS prevention.
The next/font module ensures efficient loading of both Google and local fonts, improving performance and visual stability.

By using these components, you significantly enhance your application's speed and user experience!

Gratis untuk memulai

Belajar TypeScript dengan tutor AI — gratis

Tulis dan jalankan kode asli di browser kamu, dapatkan bantuan instan dari tutor AI 24/7, dan lanjutkan di mana kamu tinggalkan di web atau aplikasi.

Kursus: 22
Pelajaran: 88

Mulai belajar gratis Lihat kursus lengkapnya

Pertanyaan yang Sering Diajukan

Apakah pelajaran “Optimasi Gambar & Font” gratis?

Ya — teks lengkap “Optimasi Gambar & 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 (App Router + Server Actions), upgrade ke CoddyKit PRO. Kursus Next.js 15 Fullstack (App Router + Server Actions) mencakup 4 pelajaran total.

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

Manfaatkan komponen Image dan Font bawaan Next.js untuk optimasi otomatis dan peningkatan kinerja pemuatan. Kamu berlatih Next.js 15 Fullstack (App Router + Server Actions) 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 (App Router + Server Actions)?

Tidak diperlukan pengalaman sebelumnya. Next.js 15 Fullstack (App Router + Server Actions) 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 1 dari 4.

Berapa lama pelajaran “Optimasi Gambar & 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 (App Router + Server Actions) ini?

Ya. Setiap pelajaran Next.js 15 Fullstack (App Router + Server Actions) 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

Optimasi Gambar & Font
Analisis Ukuran Bundel
Strategi Caching Lanjutan
UI Streaming dengan Suspense dan Status Pemuatan

← Kembali ke Next.js 15 Fullstack (App Router + Server Actions)