Skip to content

Instantly share code, notes, and snippets.

Embed
What would you like to do?
Next.js Image Gallery
import type { NextPage } from 'next';
import Image from 'next/future/image';
import Masonry from 'react-masonry-css';
type ImageEnhanced = {
src: string;
alt: string;
width: number;
height: number;
};
type ImageGalleryPageProps = {
images: ImageEnhanced[];
};
export const getStaticProps: GetStaticProps<
ImageGalleryPageProps
> = async () => {
return {
props: {
images: [
{
src: 'https://some-cdn.someurl.com/image-1.png',
alt: 'test image 1',
width: 1000,
height: 800,
},
{
src: 'https://some-cdn.someurl.com/image-2.png',
alt: 'test image 2',
width: 1000,
height: 800,
},
],
},
};
};
// NOTE: I'm using TailwindCSS here
const ImageGalleryPage: NextPage<ImageGalleryPageProps> = ({ images }) => {
return (
<Masonry>
{images.map((image) => (
<Image
key={image.src}
className="hover:opacity-80 cursor-pointer my-2"
src={image.src}
alt={image.alt}
width={image.width}
height={image.height}
/>
))}
</Masonry>
);
};
export default ImageGalleryPage;
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment