🎉 Next.js + EdgeDB template

This starter is designed to help you get up and running with EdgeDB and Next.js quickly. It includes a basic EdgeDB 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
• EdgeDB 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
├── edgedb.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/ - EdgeDB schema and migrations
• edgedb.toml - EdgeDB configuration
• edgedb.ts - EdgeDB 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/edgedb/nextjs-edgedb-basic-template.git
cd nextjs-edgedb-basic-template

pnpm i

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

2. Install EdgeDB CLI (optional)

You can just use npx edgedb, it would do the right thing to automatically install and run EdgeDB CLI for you.

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

However, you can install the CLI manually

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

For more installation options, see the EdgeDB installation guide.

3. Initialize EdgeDB project

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

npx edgedb project init

4. Generate types

This template includes a script to generate TypeScript types from the EdgeDB 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 EdgeDB UI

To view the database in the EdgeDB UI run:

npx edgedb ui

✨ Next steps

Extend the EdgeDB schema

Open the dbschema/default.esdl 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 EdgeDB 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 EdgeDB and Next.js:

• Generative UI with Vercel AI SDK and EdgeDB
• Stop building auth, start building apps with EdgeDB and Next.js
• Building a simple blog application with EdgeDB and Next.js
• Integrating EdgeDB 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 EdgeDB documentation to learn more about EdgeDB and EdgeDB Auth.

☁️ Deployment

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

Or