In this tutorial, we’ll walk through the process of building a dynamic image gallery using Next.js and Tailwind CSS. We’ll cover how to fetch and display data, create interactive hover effects, and optimize image loading. By the end of this tutorial, you’ll have a fully functional gallery that you can customize to suit your needs.
Prerequisites
Before we begin, make sure you have the following installed:
- Node.js
- npm (Node Package Manager)
Getting Started
Setting up the Project
Start by creating a new Next.js project:
npx create-next-app dynamic-image-gallery
Navigate to the project directory:
cd dynamic-image-gallery
Adding Tailwind CSS
Install Tailwind CSS and its dependencies:
npm install tailwindcss postcss autoprefixer
Create a tailwind.config.js file:
npx tailwindcss init -p
Open the tailwind.config.js file and update it as follows:
/** @type {import('tailwindcss').Config} */
module.exports = {
content: [
"./src/pages/**/*.{js,ts,jsx,tsx,mdx}",
"./src/components/**/*.{js,ts,jsx,tsx,mdx}",
"./src/app/**/*.{js,ts,jsx,tsx,mdx}",
],
theme: {
extend: {
backgroundImage: {},
},
},
};
Creating the Image Gallery Component
Replace the content of the page.js file with the following code:
import Image from "next/image";
import Link from "next/link";
import React from "react";
const App = () => {
const data = [
{
link: "add link here",
image:
"https://img.freepik.com/icones-gratuites/photo_318-224222.jpg?t=st=1692184185~exp=1692184785~hmac=9574e270a720386c1cab75eb8df937f8a31e20fbfcfebe219b3c4dd3705bc975",
comment: `you can add text with html tag <b>like this </b>`,
},
{
link: "add link here",
image:
"https://img.freepik.com/icones-gratuites/photo_318-224222.jpg?t=st=1692184185~exp=1692184785~hmac=9574e270a720386c1cab75eb8df937f8a31e20fbfcfebe219b3c4dd3705bc975",
comment: `you can add text with html tag <b>like this </b>`,
},
{
link: "add link here",
image:
"https://img.freepik.com/icones-gratuites/photo_318-224222.jpg?t=st=1692184185~exp=1692184785~hmac=9574e270a720386c1cab75eb8df937f8a31e20fbfcfebe219b3c4dd3705bc975",
comment: `you can add text with html tag <b>like this </b>`,
},
{
link: "add link here",
image:
"https://img.freepik.com/icones-gratuites/photo_318-224222.jpg?t=st=1692184185~exp=1692184785~hmac=9574e270a720386c1cab75eb8df937f8a31e20fbfcfebe219b3c4dd3705bc975",
comment: `you can add text with html tag <b>like this </b>`,
},
{
link: "add link here",
image:
"https://img.freepik.com/icones-gratuites/photo_318-224222.jpg?t=st=1692184185~exp=1692184785~hmac=9574e270a720386c1cab75eb8df937f8a31e20fbfcfebe219b3c4dd3705bc975",
comment: `you can add text with html tag <b>like this </b>`,
},
{
link: "add link here",
image:
"https://img.freepik.com/icones-gratuites/photo_318-224222.jpg?t=st=1692184185~exp=1692184785~hmac=9574e270a720386c1cab75eb8df937f8a31e20fbfcfebe219b3c4dd3705bc975",
comment: `you can add text with html tag <b>like this </b>`,
},
];
return (
<>
<div className="">
<div className="p-6 container mx-auto">
<div className="py-2">
<h1 className="text-center text-4xl">My App</h1>
</div>
<div className="md:grid md:gap-6 md:grid-cols-2 lg:grid-cols-3 mb-12">
{data.map((x) => {
return (
<>
<article
key={x.comment}
className="p-6 mb-6 transition duration-300 group transform hover:-translate-y-2 hover:shadow-2xl rounded-2xl cursor-pointer"
>
<Link
href={x.link}
className="absolute opacity-0 top-0 right-0 left-0 bottom-0"
/>
<div className="relative mb-4 rounded-2xl">
<Image
width={400}
height={400}
className="max-h-80 rounded-2xl w-full object-cover transition-transform duration-300 transform group-hover:scale-105"
src={x.image}
alt=""
/>
<Link
className="flex justify-center items-center bg-purple-500 bg-opacity-80 absolute top-0 left-0 w-full h-full text-white rounded-2xl opacity-0 transition-all duration-300 transform group-hover:scale-105 text-xl group-hover:opacity-100"
href={x.link}
target="_blank"
rel="noopener noreferrer"
>
Visite Website
</Link>
</div>
<h3 className="font-medium text-xl leading-8">
<Link
href="https://animeflyx.vercel.app/"
className="block relative group-hover:text-purple-500 transition-colors duration-200"
>
<span dangerouslySetInnerHTML={{ __html: x.comment }} />
</Link>
</h3>
</article>
</>
);
})}
</div>
</div>
</div>
</>
);
};
export default App;
Exploring the Code
We start by importing the necessary components from Next.js and React.
The data array contains objects representing each image in the gallery. Replace the placeholder values with actual data.
The App component maps over the data array to generate the individual image gallery items.
Each gallery item consists of an article element containing an image, a link to the website, and a comment.
We use Tailwind CSS classes to style the components and create interactive hover effects.
Running the App
To run the app locally, execute the following command:
npm run dev
Visit http://localhost:3000 in your web browser to see the dynamic image gallery in action.
Conclusion
Congratulations! You’ve successfully built a dynamic image gallery using Next.js and Tailwind CSS. You’ve learned how to fetch and display data, apply styles using Tailwind CSS classes, and create interactive hover effects. Feel free to customize the gallery further by adding more data items and enhancing the styling as needed. This project serves as a foundation for creating more complex galleries with additional features and functionalities. Happy coding!
Top comments (1)
Great