import type { NextPage } from "next"; import Head from "next/head"; import Image from "next/image"; import Link from "next/link"; import { useRouter } from "next/router"; import { useEffect, useRef } from "react"; import Bridge from "../components/Icons/Bridge"; import Logo from "../components/Icons/Logo"; import Modal from "../components/Modal"; import cloudinary from "../utils/cloudinary"; import getBase64ImageUrl from "../utils/generateBlurPlaceholder"; import type { ImageProps } from "../utils/types"; import { useLastViewedPhoto } from "../utils/useLastViewedPhoto"; const Home: NextPage = ({ images }: { images: ImageProps[] }) => { const router = useRouter(); const { photoId } = router.query; const [lastViewedPhoto, setLastViewedPhoto] = useLastViewedPhoto(); const lastViewedPhotoRef = useRef(null); useEffect(() => { // This effect keeps track of the last viewed photo in the modal to keep the index page in sync when the user navigates back if (lastViewedPhoto && !photoId) { lastViewedPhotoRef.current.scrollIntoView({ block: "center" }); setLastViewedPhoto(null); } }, [photoId, lastViewedPhoto, setLastViewedPhoto]); return ( <> Next.js Conf 2022 Photos
{photoId && ( { setLastViewedPhoto(photoId); }} /> )}

2022 Event Photos

Our incredible Next.js community got together in San Francisco for our first ever in-person conference!

Clone and Deploy
{images.map(({ id, public_id, format, blurDataUrl }) => ( Next.js Conf photo ))}
); }; export default Home; export async function getStaticProps() { const results = await cloudinary.v2.search .expression(`folder:${process.env.CLOUDINARY_FOLDER}/*`) .sort_by("public_id", "desc") .max_results(400) .execute(); let reducedResults: ImageProps[] = []; let i = 0; for (let result of results.resources) { reducedResults.push({ id: i, height: result.height, width: result.width, public_id: result.public_id, format: result.format, }); i++; } const blurImagePromises = results.resources.map((image: ImageProps) => { return getBase64ImageUrl(image); }); const imagesWithBlurDataUrls = await Promise.all(blurImagePromises); for (let i = 0; i < reducedResults.length; i++) { reducedResults[i].blurDataUrl = imagesWithBlurDataUrls[i]; } return { props: { images: reducedResults, }, }; }