Gel Next.js Template

This guide helps you quickly start using Gel with Next.js, providing a basic schema and UI. Here are some next steps to get you up to speed.

The result of the query SELECT random() * 10 is: 8.498622144605285
Modify the query in app/page.tsx to see the result of a different query.

Learning Resources

Explore a list of resources to help you get started with Gel and Next.js.

Extend the Gel schema
Open the schema.gel file and add your own types and fields. You can start by adding a Post type with a title and content field. For example:
type Post { # Add your new fields here: required title: str; required content: str; }
Create and run a migration
Run the following commands to create a new migration file and apply it:
$ npx gel migration create $ npx gel migration apply
Generate TypeScript types
Run the following command to generate TypeScript types for your schema:
$ pnpm generate:all

Edit the Gel query

Open the app/page.tsx file and update the query to include your new type. For example:

const postsQuery = e.select(e.Post, (_post) => ({
  id: true,
  title: true,
  content: true,
  // Add your other fields here
}))

Deploy your app
Once you're happy with your changes, you can deploy your app to the Gel Cloud and Vercel. Follow the deployment instructions in the Gel documentation.