🎉 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, it would do the right thing to automatically install and run Gel CLI for you.

This README will use npx gel <command> style, but if you have the CLI installed you can use it directly, like this: gel <command>.

<details><summary>However, you can install the CLI manually</summary>

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

For more installation options, see the Gel installation guide.

</details>

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 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;
}

Edit the Gel query

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

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:

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.

Gel on Next.js

Description

Documentation