How do you optimize images and fonts in Next.js?

Answer

Use next/image to generate responsive image sizes, prevent layout shift, and lazy-load noncritical images; use next/font to self-host and preload fonts without an external render-blocking request. Set dimensions and prioritize only the true LCP image.

Context

Next.js lets a route choose a server-first rendering and caching strategy while preserving React’s component model. Keep client boundaries small and make cache invalidation part of every mutation design.

Example

// app/products/[id]/page.tsx
export default async function ProductPage({ params }: { params: { id: string } }) {
  const product = await getProduct(params.id)
  return <h1>{product.name}</h1>
}

A Server Component can fetch data close to the route without shipping that data-access code to the browser.

Practical considerations

1. Choose the approach from the requirement and constraints, not from habit.
2. Include validation, error handling, and cleanup where the boundary requires them.
3. Verify the observable result with focused tests or measurement.

Follow-up prompts

• What failure mode would you expect if this were implemented incorrectly?
• How would you test this behaviour?
• What changes when the feature must scale to a larger application or team?

In practice

For this hard-level topic, make assumptions explicit, choose the smallest safe implementation, and verify the behavior at the relevant boundary.