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: 6.198786838606716
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.

Generative UI with Vercel AI SDK and Gel

Stop building auth, start building apps with Gel and Next.js

Building a simple blog application with Gel and Next.js

Integrating Gel with tRPC

The ultimate TypeScript query builder

Next Steps

  • 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.