Build a fast, animated image gallery with Next.js

What this post added

This post details the implementation of a performant image gallery using Next.js and Cloudinary. Key contributions include: fetching images at specific sizes (720x480px for grid, 1280x853px for modal main image, 180x120px for modal carousel, 2560x1706px for dynamic routes) via Cloudinary's Transformation URL API; utilizing the `priority` prop in `next/image` for the modal's main image; implementing image blur placeholders by fetching images at a small size, minifying them with `imagemin`, and converting them to base64 strings for instant loading; using dynamic routes with query parameters (`photoId`) and shallow routing for animated transitions within a single page; and leveraging the `sizes` prop in the Next.js Image component for responsive image loading based on viewport width.