🎉 Next.js + Replicache + Gel Todo App Template

This starter template is crafted to help developers build and deploy applications using Next.js, Replicache, and Gel. It includes essential functionalities for real-time collaboration with offline capabilities and a ready-to-use API setup.

🚀 Features

• Next.js for building the React frontend.
• Replicache for enabling real-time collaborative features and offline capabilities.
• Gel as the backend database to store and sync data efficiently.
• TypeScript for static type-checking along with modern JavaScript features.
• Tailwind CSS for utility-first CSS styling.

Data Synchronization and Conflict Resolution

This project implements Replicache's "reset strategy" for data synchronization and conflict resolution.

For more details on the reset strategy and other synchronization approaches with Replicache, visit the synchronization strategies overview on their documentation site.

🧐 What's Inside?

This project follows a structured approach typical of Next.js applications with additional directories specific to Replicache and Gel:

1
.
2
├── app                    # Next.js pages and components
3
│   ├── api                # API routes
4
│   │   ├── pull           # Pull endpoint for Replicache
5
│   │   │   └── route.ts
6
│   │   └── push           # Push endpoint for Replicache
7
│   │       └── route.ts
8
│   ├── components         # React components
9
│   │   └── TodoList.tsx   # Todo list component
10
│   ├── favicon.ico        # Favicon
11
│   ├── globals.css        # Global CSS styles
12
│   ├── layout.tsx         # Layout component
13
│   └── page.tsx           # Entry point for the app
14
├── dbschema               # gel schema files
15
│   ├── default.gel        # gel schema definition
16
│   └── migrations         # Schema migrations
17
├── lib                    # Library functions and components
18
│   ├── gel.ts             # Gel client configuration
19
│   ├── mutators.ts        # Replicache mutator functions
20
│   └── types.ts           # TypeScript types for the project
21
├── public                 # Static assets like images and fonts
22
├── gel.toml               # Gel configuration file
23
├── eslint.config.js       # ESLint configuration
24
├── next-env.d.ts          # Next.js types
25
├── next.config.js         # Next.js configuration
26
├── package.json           # NPM dependencies and scripts
27
├── pnpm-lock.yaml         # pnpm lockfile
28
├── postcss.config.js      # PostCSS configuration
29
├── README.md              # Project README
30
├── tailwind.config.ts     # Tailwind CSS configuration
31
└── tsconfig.json          # TypeScript configuration

🏁 Getting Started

1. Clone the repository

1
git clone https://github.com/geldata/nextjs-replicache-gel-starter.git
2
cd nextjs-replicache-gel-starter

2. Install dependencies

1
pnpm install # or npm install or yarn install

3. Set up Gel

Run the Gel project initialization:

1
npx gel project init

4. Set up environment variables

Create a .env.local file in the root directory and add the following environment variables:

1
NEXT_PUBLIC_REPLICACHE_LICENSE_KEY = "your-replicache-license-key"

You can get your Replicache license key by running:

1
npx replicache@latest get-license

Replace the Replicache key in the page.tsx file with your license key.

1
  const replicache = new Replicache({
2
    name: userID,
3
-   licenseKey: TEST_LICENSE_KEY,
4
+   licenseKey: process.env.NEXT_PUBLIC_REPLICACHE_LICENSE_KEY,
5
    mutators: { createTodo, updateTodo, deleteTodo },
6
    puller: pull,
7
  });

5. Start the development server

1
pnpm dev # or npm run dev or yarn dev

Open http://localhost:3000 with your browser to see the app.

🔧 Extend and customize

Modify the schema

Adjust the schema in dbschema/default.esdl to meet your application's needs. For example, add new types or extend existing ones with additional properties.

Update data fetching

Modify data fetching logic in the lib directory to enhance or alter how data interacts between the client and the database.

Enhance styles

Update the global CSS styles in app/globals.css or add new styles using Tailwind CSS utility classes.

🌐 Deployment

Deploy your application to production using Vercel:

👀 Learn More

• Next.js Documentation
• Replicache Documentation
• Gel Documentation