Tigris Database and Search + tRPC + Next.js

An example demonstrating the following tech stack:

• Tigris - database and search
• Next.js - React-based web framework
• tRPC - Remote Procedure Call library that enables Type inference across client and server

And the following Tigris products and features:

• Database Inserts
• Database Querying
• Database Query sorting
• Database Query pagination
• Search

Development

Prerequisites

• A Tigris Cloud account
• Install the Tigris CLI
• Node.js > 18.13.0 installed

Get the code and install dependencies

git clone git@github.com:tigrisdata-community/tigris-trpc-nextjs.git
cd tigris-trpc-nextjs
npm install

Create your Tigris Project

Create your Tigris project and Tigris application keys, and set environmental variables.

Setup

1. Login to the Tigris Console
2. Create a Project called tigris_trpc_nextjs (or some other name if you prefer)
3. Navigate to Application Keys
4. Click the eye icon next to the Key with the same name as your Project
5. Create a .env.development.local file and copy:

• URL to a variable named TIGRIS_URI
• Name to a variable named TIGRIS_PROJECT
• Client ID to a variable named TIGRIS_CLIENT_ID
• Client Secret to a variable named TIGRIS_CLIENT_SECRET

6. Finally, add another variable called TIGRIS_DB_BRANCH with a value of develop

An example .env.development.local is in the repo called .env.development.local.example.

Preload some data

An app with no data is no fun!

Run the following script to add some users to the database. Separate each username with a space character:

npm run add-users -- {username1} {username2} ... {usernameX}

For example, the following command will add four users to the database with the corresponding usernames:

npm run add-users -- leggetter ovaistariq adilansari GarrenSmith

Now, add some mock posts by running the following command:

npm run load-mock-data

Run the app

With users and posts loaded, we can run the app:

npm run dev

Contribute 🙌

Please do get involved! Issues and Pull Requests are very much sought and appreciated.

Code of Conduct

See the Tigris Community Code of Conduct.

More info

• Join the Tigris Community Discord
• Follow Tigris Data on Twitter
• Dive into the Tigris Docs
• Visit the Tigris Data website