Environment:

Setting up your environment

Use git to clone the Next.js starter template into a new directory called flashcards. This will create a fully configured Next.js project and a local Gel instance with an empty schema. You will see the database instance being created and the project being initialized. You are now ready to start building the application.

Copy

git clone \
  git@github.com:geldata/quickstart-nextjs.git \
  flashcards

Copy

cd flashcards

Copy

npm install

Copy

npx gel project init

Explore the empty database by starting our REPL from the project root.

Copy

npx gel

Try the following queries which will work without any schema defined.

Copy

db>

select 42;

{42}

Copy

db>

select sum({1, 2, 3});

{6}

Copy

db> 
... 
... 
... 
... 
... 
... 
... 
... 
... 
...

with cards := {
  (
    front := "What is the highest mountain in the world?",
    back := "Mount Everest",
  ),
  (
    front := "Which ocean contains the deepest trench on Earth?",
    back := "The Pacific Ocean",
  ),
}
select cards order by random() limit 1;

{
  (
    front := "What is the highest mountain in the world?",
    back := "Mount Everest",
  )
}

Fun! You will create a proper data model for the application in the next step, but for now, take a look around the project you've just created. Most of the project files will be familiar if you've worked with Next.js before. Here are the files that integrate Gel:

gel.toml: The configuration file for the Gel project instance. Notice that we have a hooks.migration.apply.after hook that will run npx @gel/generate edgeql-js after migrations are applied. This will generate the query builder code that you'll use to interact with the database. More details on that to come!
dbschema/: This directory contains the schema for the database, and later supporting files like migrations, and generated code.
dbschema/default.gel: The default schema file that you'll use to define your data model. It is empty for now, but you'll add your data model to this file in the next step.
lib/gel.ts: A utility module that exports the Gel client, which you'll use to interact with the database.

gel.toml

dbschema/default.gel

lib/gel.ts

Copy

[instance]
server-version = 6.0

[hooks]
schema.update.after = "npx @gel/generate edgeql-js"

Copy

module default {

}

Copy

import { createClient } from "gel";

export const client = createClient();

Overview Modeling the data

Setting up your environment​

Setting up your environment