History

Hassan El Mghari ca73cbf657 Improvements to Cloudinary Example (#44572 ) ## Improvements to Image Gallery - Added blur image optimization that cuts initial page size by more than half - Added masonry layout to handle images of different sizes - Converted querySelector to use refs		2023-01-04 20:37:32 +00:00
..
components	Add with-cloudinary example (#43250 )	2022-12-02 04:05:34 +00:00
pages	Improvements to Cloudinary Example (#44572 )	2023-01-04 20:37:32 +00:00
public	Add with-cloudinary example (#43250 )	2022-12-02 04:05:34 +00:00
styles	Add with-cloudinary example (#43250 )	2022-12-02 04:05:34 +00:00
utils	Improvements to Cloudinary Example (#44572 )	2023-01-04 20:37:32 +00:00
.env.local.example	Add with-cloudinary example (#43250 )	2022-12-02 04:05:34 +00:00
.gitignore	Add with-cloudinary example (#43250 )	2022-12-02 04:05:34 +00:00
next.config.js	Add with-cloudinary example (#43250 )	2022-12-02 04:05:34 +00:00
package.json	Improvements to Cloudinary Example (#44572 )	2023-01-04 20:37:32 +00:00
postcss.config.js	Add with-cloudinary example (#43250 )	2022-12-02 04:05:34 +00:00
README.md	Add with-cloudinary example (#43250 )	2022-12-02 04:05:34 +00:00
tailwind.config.js	Add with-cloudinary example (#43250 )	2022-12-02 04:05:34 +00:00
tsconfig.json	Add with-cloudinary example (#43250 )	2022-12-02 04:05:34 +00:00

Next.js & Cloudinary example app

This example shows how to create an image gallery site using Next.js, Cloudinary, and Tailwind.

Deploy your own

Deploy the example using Vercel or view the demo here

Execute create-next-app with npm, Yarn, or pnpm to bootstrap the example::

 npx create-next-app --example with-cloudinary nextjs-image-gallery

yarn create next-app --example with-cloudinary nextjs-image-gallery

pnpm create next-app --example with-cloudinary nextjs-image-gallery