16 Exercise: Image gallery in Next.js

16.1 Task

Create an image gallery app with Next.js. The app should fulfill the following requirements:

  1. Gallery view: The main page should display a gallery view of images. The images should be arranged in a grid view.

2 Image optimization: Use the <Image /> component of Next.js for each image to use automatic optimization and lazy loading.

  1. Responsive Design: The image gallery should be responsive and adapt to different screen sizes.

4 Placeholder images: Placeholder images should be displayed when loading the images to maintain the layout and improve the user experience.