Next.js Image Gallery: A Step-by-Step Tutorial with Code Examples

Are you looking to build a stunning image gallery for your Next.js project? Look no further! In this step-by-step tutorial, we'll guide you through creating an impressive image gallery using Next.js, complete with code examples to simplify the process.

Why Next.js?

Next.js is a powerful React framework that offers server-side rendering, automatic code splitting, and simple client-side routing, making it an excellent choice for building dynamic web applications with React.

Getting Started

First, ensure you have Node.js and npm installed on your system. Then, create a new Next.js project by running:

npx create-next-app next-image-gallery  
  

Navigate into your project directory:

cd next-image-gallery
  

Setting Up the Image Gallery Component

Let's create a new component for our image gallery. Inside the `components` directory, create a file named `ImageGallery.js`.

// components/ImageGallery.js

import Image from 'next/image';

const ImageGallery = ({ images }) => {
  return (
    <div className="image-gallery">
      {images.map((image, index) => (
        <div key={index} className="image-wrapper">
          <Image src={image.src} alt={image.alt} width={300} height={200} />
        </div>
      ))}
    </div>
  );
};

export default ImageGallery;  
  

Adding Styles

Let's add some basic styles for our image gallery. Create a file named `styles.module.css` inside the `components` directory.

/* components/styles.module.css */

.image-gallery {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
  gap: 20px;
}

.image-wrapper {
  overflow: hidden;
  border-radius: 8px;
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
}

.image-wrapper:hover {
  transform: scale(1.05);
  transition: transform 0.3s ease;
}  
  

Integrating the Image Gallery

Now, let's integrate our `ImageGallery` component into a page. Create a new file named `index.js` inside the `pages` directory.

// pages/index.js

import ImageGallery from '../components/ImageGallery';

const images = [
  { src: '/image1.jpg', alt: 'Image 1' },
  { src: '/image2.jpg', alt: 'Image 2' },
  { src: '/image3.jpg', alt: 'Image 3' },
  // Add more images as needed
];

const Home = () => {
  return (
    <div>
      <h1>Next.js Image Gallery</h1>
      <ImageGallery images={images} />
    </div>
  );
};

export default Home;  
  

Running Your Next.js Application

That's it! You've created a beautiful image gallery with Next.js. To see it in action, run the following command in your terminal:

npm run dev  
  

Open your browser and navigate to `http://localhost:3000` to view your Next.js image gallery.

Conclusion

In this tutorial, we've walked through the process of building an image gallery using Next.js. By following these steps and leveraging the power of Next.js, you can create engaging image galleries for your projects in no time. Happy coding!