How to Display Images from S3 in Next.js 16 (2026 Guide)

Short summary

This tutorial covers three patterns for displaying S3-hosted images in Next.js 16: public bucket URLs for non-sensitive assets, presigned GET URLs for private files, and CloudFront CDN delivery for performance at scale. It includes working code for configuring next/image remotePatterns, scoped bucket policies, and cache TTL tuning. The guide is a direct follow-up to a companion S3 upload tutorial and assumes Next.js 16 App Router with TypeScript.

• •Three display patterns: public URLs, presigned GET URLs, and CloudFront CDN
• •Covers next/image remotePatterns config and scoped S3 bucket policies
• •Includes code examples and common-mistake warnings for each pattern

Generated with AI, which can make mistakes.