{"id":28367,"date":"2022-03-23T22:02:10","date_gmt":"2022-03-23T22:02:10","guid":{"rendered":"http:\/\/Build-an-Image-Gallery-with-Next.js"},"modified":"2025-02-25T16:07:16","modified_gmt":"2025-02-26T00:07:16","slug":"build-an-image-gallery-with-next-js","status":"publish","type":"post","link":"https:\/\/cloudinary.com\/blog\/guest_post\/build-an-image-gallery-with-next-js\/","title":{"rendered":"Build an Image Gallery"},"content":{"rendered":"

In this Media Jam, we will build an Image Gallery and use the\u00a0Next.js Image component<\/a>\u00a0to optimize the images fetched from the Pexels API.<\/p>\n

This gallery will show the list of curated photos by the Pexels team, and has a dynamic route to them. The users will also be able to search for images using this gallery.<\/p>\n

Sandbox<\/h2>\n

You can play and explore the code described in this Jam on CodeSandbox<\/a>. The code to display and search through the photos can be found in src\/pages\/index.js<\/code>. The src\/pages\/photos\/[id].js<\/code> file contains the code to create dynamic routes for the pics.<\/p>\n<\/div>\n \n

\n <\/iframe>\n <\/div>\n\n

How to fetch and display the images?<\/h2>\n

To fetch the images, we will create a file named api.js<\/code> in the lib<\/code> directory. Inside this file, we will create a function to fetch the data using the fetch<\/code> method.<\/p>\n

const<\/span> API_KEY = process.env.NEXT_PUBLIC_PEXELS_API_KEY;\n\nexport<\/span> const<\/span> getCuratedPhotos = async<\/span> () => {\n  const<\/span> res = await<\/span> fetch(\n    `https:\/\/api.pexels.com\/v1\/curated?page=11&per_page=18`<\/span>,\n    {\n      headers<\/span>: {\n        Authorization<\/span>: API_KEY,\n      },\n    }\n  );\n  const<\/span> responseJson = await<\/span> res.json();\n  return<\/span> responseJson.photos;\n};\n<\/code><\/span>Code language:<\/span> JavaScript<\/span> (<\/span>javascript<\/span>)<\/span><\/small><\/pre>\n
If you take a closer look at the fetch URL, you will notice that we have added ?page=11&per_page=18<\/code> after the \/curated<\/code> endpoint. These are the optional parameters that you can pass to the \/curated<\/code> endpoint as query strings. Here page=11<\/code> means send the 11th page, and per_page=18<\/code> means that send 18 photos per page.<\/p>\n
Add the following code at the bottom of your index.js<\/code> file:<\/p>\n
export<\/span> async<\/span> function<\/span> getServerSideProps<\/span>(<\/span>) <\/span>{\n  const<\/span> data = await<\/span> getCuratedPhotos();\n  return<\/span> {\n    props<\/span>: {\n      data,\n    },\n  };\n<\/code><\/span>Code language:<\/span> JavaScript<\/span> (<\/span>javascript<\/span>)<\/span><\/small><\/pre>\n
The above async function uses getCuratedPhotos()<\/code> to fetch images from the Pexels API and store them in the data<\/code> variable. This data<\/code> variable is made available as a prop in the props<\/code> property.<\/p>\n
This data<\/code> is available as a prop, so add it as an argument in the Home<\/code> component function.<\/p>\n
export<\/span> default<\/span> function<\/span> Home<\/span>({data}<\/span>) <\/span>{\nconst<\/span> [photos, setPhotos] = useState(data);\n...\n}\n<\/code><\/span>Code language:<\/span> JavaScript<\/span> (<\/span>javascript<\/span>)<\/span><\/small><\/pre>\n
{\n  photos.map((pic<\/span>) =><\/span> (\n    <img<\/span> src<\/span>={pic.src.original}<\/span> width<\/span>=\"500\"<\/span> height<\/span>=\"500\"<\/span> \/><\/span><\/span>\n  ))\n}\n<\/code><\/span>Code language:<\/span> JavaScript<\/span> (<\/span>javascript<\/span>)<\/span><\/small><\/pre>\n
How to optimize images using the Next.js Image component?<\/h2>\n
First, you need to import this component in index.js<\/code>.<\/p>\n
import<\/span> Image from<\/span> \"next\/image\"<\/span>;\n<\/code><\/span>Code language:<\/span> JavaScript<\/span> (<\/span>javascript<\/span>)<\/span><\/small><\/pre>\n
You will need to use this component to display the images instead of img<\/code> element.<\/p>\n
{\n  photos.map((pic<\/span>) =><\/span> (\n    <Image<\/span>\n      src<\/span>={pic.src.portrait}<\/span>\n      height<\/span>={600}<\/span>\n      width<\/span>={400}<\/span>\n      alt<\/span>={pic.url}<\/span>\n    \/><\/span><\/span>\n  ))\n}\n<\/code><\/span>Code language:<\/span> JavaScript<\/span> (<\/span>javascript<\/span>)<\/span><\/small><\/pre>\n
You will also need to create a next.config.js<\/code> file to tell Next.js to trust the domain where the images are coming from. Add the following code to next.config.js<\/code>:<\/p>\n
module<\/span>.exports = {\n  images<\/span>: {\n    domains<\/span>: [\"images.pexels.com\"<\/span>],\n  },\n};\n\n<\/code><\/span>Code language:<\/span> JavaScript<\/span> (<\/span>javascript<\/span>)<\/span><\/small><\/pre>\n
This component will optimize the images fetched from Pexels.<\/p>\n
\"https:\/\/res.cloudinary.com\/jesse-thisdot\/image\/upload\/v1615030692\/e-603fc45fe6c0b4006873802f\/fiwjqdq8ofrddwhqjww3.png\"<\/p>\n
Even though the images are now in webp<\/code> format, is it necessary to load all the images whenever someone visits your website? And if the visitor just comes and leaves without scrolling, does it make sense to load the images at the bottom of the page?<\/p>\n
There is no need to load the images that a user or visitor is not going to see in most situations.<\/p>\n
And that\u2019s where Lazy Loading<\/strong> comes to save the day. It delays the requests to images as to when they are needed, or in this situation, when images come into view. This helps to significantly reduce the initial page weight, and improves website performance.<\/p>\n
If you head over to http:\/\/localhost:3000\/<\/a> and scroll through all the images, you will see that the images that are not in the viewport are not loaded initially. But as you scroll down, they are transferred and loaded.<\/p>\n
\"https:\/\/res.cloudinary.com\/jesse-thisdot\/image\/upload\/v1615030531\/e-603fc45fe6c0b4006873802f\/nex7lj6ydmvkjjhwetde.gif\"<\/p>\n
What\u2019s next?<\/h2>\n
You could further develop this project and add other features and functionalities to it. Maybe you could start by adding animations, using Framer Motion<\/a>!<\/p>\n
Here are some additional resources that can be helpful:<\/p>\n
The Next.js Image component has also added lazy loading<\/a> to images. Here is an example to explain how and why you should use lazy loading if you are unfamiliar with it.<\/p>\n
Why should you optimize the images in your app?<\/h2>\n
A high definition image can range anywhere from 10MB to 100MB in size or more based on the image\u2019s quality.<\/p>\n
Imagine you have 80 images on your app\u2019s landing page. Does it make sense to transfer around 800 MB of files every time someone visits your Gallery or website? It does not<\/strong>.<\/p>\n
\"https:\/\/res.cloudinary.com\/jesse-thisdot\/image\/upload\/v1615030328\/e-603fc45fe6c0b4006873802f\/zllksif5m69w3kagimsa.png\"<\/p>\n
This is why today, most of the images on the web are served in WebP<\/a> format. This format significantly reduces the size<\/strong> of the image, and you can hardly detect any visual difference<\/strong>.<\/p>\n
So, we need to change the image format to webp<\/code>, but the question is, how? Do you need to do it manually? If yes, won\u2019t it be time consuming and tiresome?<\/p>\n
No, you don\u2019t need to do it manually.<\/strong><\/p>\n
Next.js version 10<\/a> comes with built-in support for Image Optimization using the Image<\/strong> component. You can read more about this update here<\/a>.<\/p>\n
You could store the images in a React State<\/a> named photos<\/code>, and then map over it to display the pictures using the img<\/code> element.<\/p>\n
We will use the getServerSideProps()<\/code> function available in Next.js and use the getCuratedPhotos()<\/code> function inside it to fetch data from Pexels API and inject it in our page. You can read more about getServerSideProps()<\/code> here<\/a>.<\/p>\n