Next.js
Images and Fonts
Next.js optimizes images and fonts to improve performance and reduce layout shift.
next/image
- Auto-selects formats (WebP/AVIF), responsive sizes, and lazy loading.
- Optimizes caching; reduces CLS with
width/heightorfill.
import Image from "next/image";
<Image src="/hero.jpg" width={1200} height={600} alt="Hero" />Core features
priorityfor LCP elements.placeholder="blur"for perceived speed.- CDN caching on Vercel.
next/font
- Removes Google Fonts network requests.
- Fonts are inlined or self-hosted; reduces FOIT/FOUT.
APIs
next/font/google(served locally).next/font/local(project fonts).
import { Inter } from "next/font/google";
const inter = Inter({ subsets: ["latin"] });<body className={inter.className}>...</body>Benefits
- Smaller CSS/JS, improved LCP/FCP, less CLS.