This example showcases a multilingual image gallery using Next.js's Static Exports feature using Sanity as the data source.
Originally based on Blog Starter Kit with Sanity.
An exhibition designer may come across situations for which traditional in-gallery labels or space are insufficient. The Whitney's Collection installation uses graphic label guides to help visitors find objects, while MoMA's Page Turners showcase additional exhibition material.
This prototype demonstrates how one could use a CMS (in this case, Sanity) with Next.js to statically generate a web-based interactive gallery. The static build files could then be deployed to an in-gallery touchscreen display such as an iPad in kiosk mode. Note: This project still needs work, for example images need to be locally served.
This is a prototype and not a design proposal, more work would be needed to make this viable and accessible.
This is not a suggestion that in-gallery interactive touchscreens are necessarily a good idea. In particular, they require maintenance and have accessiblity issues.
The Whitney's Collection installation is a great example of how to use physical, graphic label guides to help visitors find objects in a complicated installation, instead of resorting to touchscreens.
Installation view of The Whitney’s Collection: Selections from 1900 to 1965
MoMA In-Gallery Page Turners by Eric Li
npm install && npm run devyarn install && yarn devYour gallery should be up and running on http://localhost:3000!
Note: This also installs dependencies for Sanity Studio as a post-install step.
npx vercel linkDownload the environment variables needed to connect Next.js and Studio to your Sanity project:
npx vercel env pullBuild the project:
npx vercel buildDeploy the prebuilt project:
npx vercel deploy --prebuiltScreenshot of "Wall" gallery:
Screenshot of the interactive gallery:
Screenshot of the Sanity Studio, editing an Artwork:
