Next.js 15 Fullstack (App Router + Server Actions) · レッスン

画像とフォントの最適化

Next.js組み込みのImageおよびFontコンポーネントを活用し、自動最適化によって読み込みパフォーマンスを向上させます。

「画像とフォントの最適化」はCoddyKit上の無料Next.js 15 Fullstack (App Router + Server Actions)レッスンです。これはレッスン1/4です。下記で完全なレッスンを無料で読むことができます。その後、ブラウザ内の組み込みコードエディタと24時間対応のAIチューターでハンズオン演習できます。これはNext.js 15 Fullstack (App Router + Server Actions)学習パスの一部であり、ウェブとCoddyKitアプリ全体で進捗が同期されます。 Next.js 15 Fullstack (App Router + Server Actions)コースには全4レッスンが含まれています。

このレッスンの一部はまだ翻訳されておらず、英語で表示されています。

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!

よくある質問

「画像とフォントの最適化」レッスンは無料ですか？

はい。「画像とフォントの最適化」の完全なテキストはこのウェブで無料で読めます。インタラクティブに演習し（組み込みコードエディタと24時間対応のAIチューター）、Next.js 15 Fullstack (App Router + Server Actions)コースの残りをアンロックするには、CoddyKit PROにアップグレードしてください。 Next.js 15 Fullstack (App Router + Server Actions)コースには全4レッスンが含まれています。

「画像とフォントの最適化」で何を学びますか？

Next.js組み込みのImageおよびFontコンポーネントを活用し、自動最適化によって読み込みパフォーマンスを向上させます。ブラウザで直接実行するハンズオンコードでNext.js 15 Fullstack (App Router + Server Actions)を演習し、24時間対応のAIチューターがレッスンを進める中での質問に答えます。

Next.js 15 Fullstack (App Router + Server Actions)を始めるのに経験は必要ですか？

事前経験は必要ありません。CoddyKitのNext.js 15 Fullstack (App Router + Server Actions)は初級者から上級者向けに構成されているため、ここから始めるか最初から始めて、自分のペースで進むことができます。これはレッスン1/4です。

「画像とフォントの最適化」レッスンにはどのくらい時間がかかりますか？

ほとんどのCoddyKitレッスンは約5～10分かかります。各レッスンはコンパクトでインタラクティブなので、着実に進歩し、ウェブとアプリ全体で正確に前回の場所から再開できます。

このNext.js 15 Fullstack (App Router + Server Actions)レッスンでコードを書いて実行できますか？

はい。すべてのNext.js 15 Fullstack (App Router + Server Actions)レッスンに組み込みコードエディタが含まれているため、ブラウザでリアルコードを書いて実行し、即座のAIフィードバックを取得できます。ローカル設定は不要です。

このコースのすべてのレッスン

← Next.js 15 Fullstack (App Router + Server Actions)に戻る