🎉 Gel + Next.js template

This starter is designed to help you get up and running with Gel and Next.js quickly. It includes a basic Gel schema and a UI to get you started. Below you can find the steps to set up the project and start building your app as well as some ideas for extending it further.

This template includes:

• Next.js for React framework
• Gel for database
• Tailwind CSS for utility-first CSS framework
• ESLint for linting

🧐 What's inside?

.
├── README.md
├── app
│   ├── favicon.ico
│   ├── globals.css
│   ├── layout.tsx
│   └── page.tsx
├── components/
├── src/
├── public/
├── dbschema
│   ├── default.esdl
├── gel.toml
├── eslint.config.js
├── next-env.d.ts
├── next.config.js
├── package.json
├── pnpm-lock.yaml
├── postcss.config.js
├── tailwind.config.ts
└── tsconfig.json

Directory structure:

• app/

  - Next.js pages and components

• public/

  - static assets

• components/

  - React components

• src/

  - utility functions

• dbschema/

  - Gel schema and migrations

• gel.toml

  - Gel configuration

• gel.ts

  - Gel client

• eslint.config.js

  - ESLint configuration

• next-env.d.ts

  - Next.js types

• next.config.js

  - Next.js configuration

• package.json

  - npm dependencies

• pnpm-lock.yaml

  - pnpm lockfile

• postcss.config.js

  - PostCSS configuration

• tailwind.config.ts

  - Tailwind CSS configuration

• tsconfig.json

  - TypeScript configuration

🚀 Quick start

To get started with this template, you need to:

1. Clone the repository & install dependencies

git clone https://github.com/geldata/nextjs-gel-basic-template.git
cd nextjs-gel-basic-template

pnpm i

You can also click the "Use this template" button to create a new repository based on this template.

2. Install Gel CLI (optional)

You can just use

npx gel

This README will use

npx gel <command>

gel <command>

curl --proto '=https' --tlsv1.2 -sSf https://sh.geldata.com | sh

For more installation options, see the Gel installation guide.

3. Initialize Gel project

To run this project, you need to initialize a new Gel project. Run the following command:

npx gel project init

4. Generate types

This template includes a script to generate TypeScript types from the Gel schema. Run the following command:

pnpm generate:all

5. Start the development server

pnpm dev

Follow the instructions in the terminal to open the app in your browser.

6. Open the Gel UI

To view the database in the Gel UI run:

npx gel ui

✨ Next steps

Extend the Gel schema

Open the

dbschema/default.gel

Post

title

content

type Post {
  # Add your new fields here:
  required title: str;
  required content: str;
}

Edit the Gel query

Open the

app/page.tsx

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

👩‍🏫 Learn More

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

To learn more about Next.js, take a look at the following resources:

• Next.js Documentation - learn about Next.js features and API.
• Learn Next.js - an interactive Next.js tutorial.

You can also check out the Gel documentation to learn more about Gel and Gel Auth.

☁️ Deployment

Follow the deployment instructions in the Gel documentation to deploy your Next.js app to Gel Cloud and Vercel.

Or