Next.js · Lesson 14 of 15

Images, Fonts and Performance

next/image, next/font, bundle analysis and Core Web Vitals.

Advanced
15 min read
3 objectives

Before this lessonLesson 13: Testing Next.js Apps

What you will learn

Optimize images
Self-host fonts
Find a heavy import

Your Progress

0 of 15 lessons 0%

Lessons0 / 15
Completed0
Est. time left~ 4 hours

Create a free account to keep your progress on every device.

Core Web Vitals (LCP, INP, CLS) are mostly won with images, fonts and how much JavaScript you send.

next/image

import Image from "next/image";

<Image
  src="/hero.jpg"
  alt="Team at a whiteboard"
  width={1200}
  height={800}
  priority          // LCP image on the first screen
/>

The component serves modern formats, srcset, and lazy-loads everything without priority. Remote hosts must be listed in images.remotePatterns.

next/font

Self-hosting Google fonts avoids a render-blocking request to another origin.

import { Inter } from "next/font/google";
const inter = Inter({ subsets: ["latin"], display: "swap" });

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

Find the heavy import

npm i -D @next/bundle-analyzer
ANALYZE=true npm run build

A charting library or a markdown renderer should be dynamic(() => import(...)) so it is not in the first bundle.

Up next · Lesson 15Full-stack Project StructureLay out a production App Router project and keep server code off the client.