Fonts and next/image

Last reviewed May 28, 2026 Content v20260528

Track mode

client_nextjs

Means

In-browser Next.js (client components)

Reading

~1 min

Level

intermediate

This lesson

This lesson teaches Fonts and next/image: the concepts, APIs, and habits you need before advancing in Next.js.

Without Fonts and next/image, you will struggle to read or extend Next.js codebases and playground exercises.

You will apply Fonts and next/image in contexts like: Marketing sites, dashboards, e-commerce, and Vercel-style deployments that need hybrid static + dynamic pages.

Write TSX for Client Components, click Run—React 18 CDN + in-browser TSX compile; use client/server lessons explain App Router concepts; mountApp renders interactive UI; printOutput feeds the terminal.

When you can explain the previous lesson's ideas without copying starter code.

Next.js ships optimized helpers for fonts and images—common performance and layout-shift pain points on content sites.

next/font

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

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

export default function RootLayout({ children }: { children: React.ReactNode }) {
  return (
    <html lang="en" className={inter.className}>
      <body>{children}</body>
    </html>
  );
}

Fonts self-host at build time—no extra layout shift from late-loading Google CSS.

next/image

import Image from 'next/image';

<Image
  src="/hero.jpg"
  alt="Team photo"
  width={800}
  height={450}
  priority
/>

Automatic responsive sizes and modern formats (WebP/AVIF where supported)
Lazy loading by default; priority for LCP heroes
Remote domains must be allowlisted in next.config.js

Playground note

Use standard <img> in the sandbox; apply the same sizing and alt discipline you would with next/image locally.

Self-check

Why specify width and height on images?
What does display: 'swap' on fonts improve?

Playground

Runs in your browser in a sandboxed frame. Backend runners appear when this track’s profile allows them.

Discussion

Past discussion is visible to everyone. Only logged-in users can post comments and replies.

Starter discussion topics

next/image vs img?
Font loading win?

No discussion yet. Be the first to ask a question.