5.4 KiB
⚡ ️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
- Tigris installed on your dev computer
- For macOS:
brew install tigrisdata/tigris/tigris-cli
- Other operating systems: See installation instructions here
- For macOS:
- Node.js version 16+
Instructions
- Clone this repo on your computer
git clone https://github.com/tigrisdata/tigris-vercel-starter
- Install dependencies
cd tigris-vercel-starter
npm install
- Start Tigris local development environment
tigris dev start
- 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 ArrayPOST /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 itemPUT /api/item/{id}
to update the given itemDELETE /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