0Pricing
Next.js 15 Fullstack (App Router + Server Actions) · Ders

Görsel ve Yazı Tipi Optimizasyonu

Otomatik optimizasyon ve daha iyi yükleme performansı için Next.js'in yerleşik Image ve Font bileşenlerinden yararlanın.

Görsel ve Yazı Tipi Optimizasyonu, CoddyKit'te ücretsiz bir Next.js 15 Fullstack (App Router + Server Actions) dersidir. Bu, 4 dersinin 1. dersidir. Aşağıdan dersin tamamını ücretsiz okuyabilir, sonra tarayıcıda yerleşik kod editörü ve 7/24 yapay zeka koçu ile uygulamalı olarak pratik yapabilirsin. Bu, Next.js 15 Fullstack (App Router + Server Actions) öğrenme yolunun bir parçasıdır ve ilerlemeniz web ve CoddyKit uygulaması arasında senkronize olur. Next.js 15 Fullstack (App Router + Server Actions) kursu toplamda 4 dersten oluşur.

Bu dersin bazı bölümleri henüz çevrilmemiş olup İngilizce olarak gösterilmektedir.

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?

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!

Sıkça Sorulan Sorular

“Görsel ve Yazı Tipi Optimizasyonu” dersi ücretsiz mi?

Evet — “Görsel ve Yazı Tipi Optimizasyonu” dersin tüm metni burada web'de ücretsiz olarak okunabilir. Etkileşimli olarak pratik yapmak (yerleşik kod editörü ve 7/24 yapay zeka koçu) ve Next.js 15 Fullstack (App Router + Server Actions) kursunun geri kalanını açmak için CoddyKit PRO'ya yükselt. Next.js 15 Fullstack (App Router + Server Actions) kursu toplamda 4 dersten oluşur.

“Görsel ve Yazı Tipi Optimizasyonu” dersinde ne öğreneceğim?

Otomatik optimizasyon ve daha iyi yükleme performansı için Next.js'in yerleşik Image ve Font bileşenlerinden yararlanın. Next.js 15 Fullstack (App Router + Server Actions) ile uygulamalı kodu tarayıcıda doğrudan çalıştırarak pratik yaparsın ve 7/24 yapay zeka koçu dersi çalışırken sorularını yanıtlar.

Next.js 15 Fullstack (App Router + Server Actions) öğrenmeye başlamak için deneyim gerekli mi?

Önceden deneyim gerekmez. CoddyKit'te Next.js 15 Fullstack (App Router + Server Actions), başlangıçtan ileri seviyeye kadar yapılandırıldığı için buradan başlayabilir veya başından başlayıp kendi hızında ilerleme yapabilirsin. Bu, 4 dersinin 1. dersidir.

“Görsel ve Yazı Tipi Optimizasyonu” dersi ne kadar sürer?

Çoğu CoddyKit dersi yaklaşık 5–10 dakika sürer. Her biri kısa ve etkileşimli olduğu için sabit ilerleme yaparsın ve web ile uygulama arasında tam olarak bıraktığın yerden devam edebilirsin.

Bu Next.js 15 Fullstack (App Router + Server Actions) dersinde kod yazıp çalıştırabilir miyim?

Evet. Her Next.js 15 Fullstack (App Router + Server Actions) dersi yerleşik bir kod editörü içerir, bu sayede tarayıcıda gerçek kod yazıp çalıştırabilir ve anlık yapay zeka geri bildirimi alırsın — yerel kurulum gerekli değildir.

Bu kursun tüm dersleri

  1. Görsel ve Yazı Tipi Optimizasyonu
  2. Paket Boyutu Analizi
  3. Gelişmiş Önbellekleme Stratejileri
  4. Suspense ve Yükleme Durumlarıyla Akış Tabanlı Kullanıcı Arayüzü
← Next.js 15 Fullstack (App Router + Server Actions) Sayfasına Dön