Next.js In-Depth
Module F-6·13 min read

Why next/image exists, the four Script loading strategies, the new Form component for prefetched search, and what Link's prefetch prop actually controls.

Written by Jatin Jain Saraf · Architect of SupraScan

F-6 — Built-in Components: Image, Font, Script, Link, and Form

Who this is for: Developers who have the routing and data fetching fundamentals from F-2 through F-5. This module covers the performance-focused built-in components that Next.js provides to solve specific web performance problems that raw HTML handles poorly. Each one exists because the naive implementation has a measurable negative impact on Core Web Vitals.

Why Built-in Components Exist

Every component in this module replaces something you've almost certainly done the naive way — and the naive way works, in the sense that it renders. But each naive approach has a specific performance pathology that shows up in real metrics.

Unoptimised images: Largest Contentful Paint catastrophe. Raw @import fonts: FOUT (Flash of Unstyled Text) and layout shift. Synchronous third-party <script> tags: parser blocking and slower Time to Interactive. Regular <a> tags: no prefetching, no client-side navigation.

Next.js's built-in components solve these problems systematically so you don't have to rediscover them project by project. Understanding why each one works the way it does means you'll use them correctly instead of fighting them.

next/image — Automatic Image Optimization

The <Image> component from next/image does four things that a raw <img> tag doesn't:

  1. Serves modern formats automatically — converts JPEGs and PNGs to WebP (or AVIF where supported), reducing file size by 25–50%
  2. Resizes on demand — serves exactly the size the layout needs, not a 4K image shrunk with CSS
  3. Lazy loads below-the-fold images — only downloads images when they enter the viewport
  4. Prevents layout shift — reserves the correct space before the image loads, eliminating Cumulative Layout Shift
import Image from 'next/image';
 
// Local image (TypeScript knows the dimensions at build time)
import heroPhoto from '@/public/hero.jpg';
 
export default function Hero() {
  return (
    <Image
      src={heroPhoto}
      alt="Hero image"
      priority  // ← loads eagerly — use for above-the-fold images
    />
  );
}

For remote images, you must specify width and height explicitly and configure allowed remote origins in next.config.ts:

// ❌ This will fail without dimensions
<Image src="https://images.example.com/photo.jpg" alt="Photo" />
 
// ✅ Width and height required for remote images
<Image
  src="https://images.example.com/photo.jpg"
  alt="Photo"
  width={800}
  height={600}
  className="rounded-lg"
/>
// next.config.ts — allowlist remote image origins
import type { NextConfig } from 'next';
 
const config: NextConfig = {
  images: {
    remotePatterns: [
      {
        protocol: 'https',
        hostname: 'images.example.com',
      },
    ],
  },
};
 
export default config;

The security model: allowing arbitrary remote URLs would let anyone use your Next.js server as a free image resize proxy. The allowlist prevents that.

fill for Responsive Containers

When you don't know the image dimensions (dynamic content, CMS images), use fill to let the image fill its parent container:

<div className="relative h-64 w-full">
  <Image
    src={product.imageUrl}
    alt={product.name}
    fill
    className="object-cover"  // ← CSS determines how image fits the container
    sizes="(max-width: 768px) 100vw, 50vw"  // ← tells Next.js which sizes to generate
  />
</div>

The parent must have position: relative (or absolute/fixed). The sizes attribute is important — it tells the browser (and Next.js's image optimizer) which image size to serve at each breakpoint. Without it, Next.js defaults to 100vw, potentially serving much larger images than needed.

priority vs Lazy Loading

By default, images are lazy-loaded. The one exception: images that are visible immediately on page load — your hero image, your above-the-fold product photo — should have priority. This tells Next.js to preload them with <link rel="preload"> in the document <head>, improving LCP.

// Above the fold — use priority
<Image src={heroImage} alt="Hero" priority />
 
// Below the fold — lazy loading is correct (default)
<Image src={productImage} alt={product.name} />

LCP (Largest Contentful Paint) is Google's primary Core Web Vitals metric. The LCP element is almost always a hero image or above-the-fold photo. Forgetting priority on the LCP image is one of the most common Next.js performance mistakes — your Lighthouse score will tell you if you've missed it.

next/font — Zero Layout Shift Typography

Fonts are a well-documented performance problem. The traditional approach — @import url('https://fonts.google.com/...') — blocks rendering, can cause Flash of Unstyled Text, and triggers Cumulative Layout Shift when the font loads and text reflows.

next/font solves this by downloading the font at build time, self-hosting it, and generating CSS with font-display: swap and fallback metrics calculated to match the Google font's actual glyph shapes.

Sign in to keep reading

The rest of this module is free — sign in with Google to unlock it and track your progress.

Sign in & Register
PreviousModule F-5: Dynamic Routes, Params, and Navigation HooksNext Module F-7: Route Handlers and the Backend-for-Frontend Pattern

Discussion

0

Join the discussion

Loading comments...
PortfolioBlog

© 2026 Jatin Jain Saraf (JJS). All rights reserved.