nextjs - 💡(How to fix) Fix Optimizing Image-Heavy Pages with Next.js and Vercel Without Layout Shifts [1 comments, 2 participants]

Link to the code that reproduces this issue

australiacityguide

To Reproduce

Hello,

I’m working on a content-heavy Next.js project deployed on Vercel, where each page includes multiple high-resolution images, dynamic content sections, and interactive elements. We’ve been facing several performance and rendering challenges:

Pages with multiple images experience slow load times, affecting Core Web Vitals scores and overall SEO.

Implementing next/image with lazy loading sometimes causes cumulative layout shifts (CLS), especially on pages where images load asynchronously.

Managing image metadata for SEO for my website australiacityguide.com.au (alt attributes, structured data) across dynamically generated pages is cumbersome, particularly when using getStaticProps and getStaticPaths.

Edge caching and incremental static regeneration (ISR) sometimes conflicts with large media assets, delaying content updates.

Here’s a simplified snippet of the current implementation:

Current vs. Expected behavior

// pages/[city].js import Image from 'next/image'; import { getCityData } from '../lib/cities';

export default function CityPage({ city }) { return ( <div> <h1>{city.name}</h1> <p>{city.description}</p> {city.images.map((img, index) => ( <Image key={index} src={img.url} alt={img.alt} width={800} height={600} priority={index < 2} // Only first two images are priority loaded /> ))} </div> ); }

export async function getStaticPaths() { const cities = await getCityData(); return { paths: cities.map(city => ({ params: { city: city.slug } })), fallback: false }; }

export async function getStaticProps({ params }) { const city = await getCityData(params.city); return { props: { city } }; }

Provide environment information

no info for this

Which area(s) are affected? (Select all that apply)

Not sure

Which stage(s) are affected? (Select all that apply)

Vercel (Deployed)

Additional context

Questions:

What are best practices for serving multiple high-resolution images efficiently in Next.js without negatively impacting load times or CLS?

How can next/image be combined with modern lazy loading, caching, or edge strategies on Vercel for large, dynamic content pages?

Are there recommended patterns to automate SEO-friendly alt text and structured data for images generated dynamically via getStaticProps?

Any guidance or insights from developers who have handled image-heavy, dynamic Next.js deployments on Vercel would be highly appreciated.