rsnext/examples/with-tigris

⚡ ️Tigris example app on Next.js - Todo list

A simple todo app built on Next.js and Tigris using TypeScript client, deployed on Vercel.

Project demo

https://tigris-nextjs-starter-kit.vercel.app/

⚙️ Deploying your own

All you need is a Github, Vercel and Tigris account(sign up for a free account). Now, Hit "Deploy" and follow instructions to deploy app to your Vercel account

🎉 All done. You should be able to use app on the URL provided by Vercel. Feel free to play around or do a code walkthrough next 🎉

Tigris integration with Vercel will automatically fetch access keys to populate Environment Variables when deploying app.

2. Running Next.js server & Tigris dev environment on your local computer

📖 Running Next.js server & Tigris locally

Prerequisites

1. Tigris installed on your dev computer
   1. For macOS: brew install tigrisdata/tigris/tigris-cli
   2. Other operating systems: See installation instructions here
2. Node.js version 16+

Instructions

1. Clone this repo on your computer

git clone https://github.com/tigrisdata/tigris-vercel-starter

2. Install dependencies

cd tigris-vercel-starter
npm install

3. Start Tigris local development environment

tigris dev start

4. Run the Next.js server

npm run dev

Note: This step uses a custom dev & build script to initialize Tigris collections for the app and requires ts-node to be installed.

🎉 All done. You should be able to use app on localhost:3000 in browser. Feel free to play around or do a code walk-through next 🎉

📖 How to use

Execute create-next-app with npm, Yarn, or pnpm to bootstrap the example:

npx create-next-app --example with-tigris tigris-next-app

yarn create next-app --example with-tigris tigris-next-app

pnpm create next-app --example with-tigris tigris-next-app

Deploy it to the cloud with Vercel (Documentation).

👀 Code walkthrough

📂 File structure

├── package.json
├── lib
│   ├── tigris.ts
├── db
│   └── models
│       └── todoItems.ts
└── pages
    ├── index.tsx
    └── api
        ├── item
        │   ├── [id].ts
        └── items
            ├── index.ts
            └── search.ts

🪢 Tigris schema definition

db/models/todoItems.ts - The to-do list app has a single collection todoItems that stores the to-do items. The Collection gets automatically provisioned by the setup script.

🌐 Connecting to Tigris

lib/tigris.ts - Loads the environment variables you specified previously in creating a Vercel project section and uses them to configure the Tigris client.

❇️ API routes to access data in Tigris collection

All the Next.js API routes are defined under pages/api/. We have three files exposing endpoints:

pages/api/items/index.ts

• GET /api/items to get an array of to-do items as Array
• POST /api/items to add an item to the list

/pages/api/items/search.ts

• GET /api/items/search?q=query to find and return items matching the given query

pages/api/item/[id].ts

• GET /api/item/{id} to fetch an item
• PUT /api/item/{id} to update the given item
• DELETE /api/item/[id] to delete an item

🚀 Next steps

In a few steps, we learnt how to bootstrap a Next.js app using Tigris and deploy it on Vercel. Feel free to add more functionalities or customize App for your use-case and learn more about Tigris data platform