Next.js: The React Framework (App Router)Entry 15 of 16

Images and Fonts

next/image resizes, lazy-loads, and serves modern image formats automatically. next/font self-hosts fonts at build time with no layout shift.

nextjs.orgnext/font

Notes

<Image> requires width and height (or fill) to reserve space and prevent layout shift.
Images are lazy-loaded by default; mark the largest above-the-fold image to load eagerly.
Remote images need their domains listed in images.remotePatterns in next.config.ts.
next/font/google downloads fonts at build time; no request goes to Google from the browser.

What / Why / When

What: Built-in image and font optimization.
Why: Better Core Web Vitals (LCP, CLS) without manual work.
When: Every image and web font.
Use case: A hero image and the site's body font.

Code compare

Next.js

// app/layout.tsximport { Inter } from "next/font/google";const inter = Inter({ subsets: ["latin"] });export default function RootLayout({ children }: { children: React.ReactNode }) {  return (    <html lang="en" className={inter.className}>      <body>{children}</body>    </html>  );}

Next.js

// app/page.tsximport Image from "next/image";export default function Home() {  return <Image src="/hero.jpg" alt="Code on a screen" width={1200} height={600} loading="eager" />;}

Angular

import { Component } from "@angular/core";import { NgOptimizedImage } from "@angular/common";@Component({  selector: "app-home",  imports: [NgOptimizedImage],  template: `<img ngSrc="/hero.jpg" alt="Code on a screen" width="1200" height="600" priority />`,})export class HomeComponent {}

Fonts: link Google Fonts in index.html; with "optimization": { "fonts": true } (the production default) the Angular CLI inlines the font CSS at build time.

Differences and gotchas

NgOptimizedImage enforces dimensions and warns about the LCP image, but resizing and format conversion need an image loader (a CDN such as Cloudinary or imgix). Next.js resizes on its own server.
Angular's font inlining removes the CSS request; the font files still load from Google unless you self-host them.

Quick reference

Next.js	Angular
`<Image src width height>`	`<img ngSrc width height>` (`NgOptimizedImage`)
Eager LCP image	`priority`
`images.remotePatterns`	Image loader config
`next/font/google`	CLI font inlining / self-hosted fonts