Live demo

A live demo of this application is available at https://xata-gallery.vercel.app. The demo turns off the ability to upload and delete images. For local or forked versions, set the .env setting READ_ONLY=false.

Sample gallery app powered by Xata

A small example Xata application built with Next.js & Chakra UI.

This app showcases serveral Xata features including:

• Offset based pagination
• Form management and submission
• Search
• Aggregations
• Summaries
• Image transformations
• Queries using junction tables and links
• Proper Next.js + Xata TypeScript patterns

To run this example locally with your own database

You'll need to install Xata before performing these steps.

• git clone git@github.com:xataio/sample-nextjs-chakra-gallery-app.git
• cd sample-nextjs-chakra-gallery-app
• pnpm install
• Run pnpm run bootstrap the first you set up the project. This will ask for a Xata database to install to (you can create a new one) and then seed in some data.
• pnpm run dev to load the site at http://localhost:3000
• Add images either through the application, or through your database UI at https://app.xata.io

Environment variables

After you run init, your .env file should look like this

# Xata credentials
XATA_BRANCH=main
XATA_API_KEY=

# Setting to true will disable API / UI to write to the database
READ_ONLY=false