Skip to main content

Tigris and Next.js

Tigris is the scalable real-time backend for Next.js applications. Build data-rich features, seamlessly implement search, and easily connect serverless functions.

Getting started

You'll need a few things installed

Setup Tigris account

Lets set up the Tigris account first.

tigris login

This will let you sign in to your existing Tigris account, or signup for a new account.

Terminal
$ tigris login
Opening login page in the browser. Please continue login flow there.
Successfully logged in

Initialize your Next.js app

Next.js allows you to bootstrap apps using create-next-app utility

npx create-next-app --example with-tigris
Output
Terminal
$ ➔  npx create-next-app --example with-tigris
✔ What is your project named? … my-tigris-app
Creating a new Next.js app in ./my-tigris-app.

Downloading files for example with-tigris. This might take a moment.

Installing packages. This might take a couple of minutes.


added 67 packages, and audited 68 packages in 4s

5 packages are looking for funding
run `npm fund` for details

found 0 vulnerabilities

Initialized a git repository.

Success! Created my-tigris-app at ./my-tigris-app
Inside that directory, you can run several commands:

npm run dev
Starts the development server.

npm run build
Builds the app for production.

npm start
Runs the built app in production mode.

We suggest that you begin by typing:

cd my-tigris-app
npm run dev

Add the Tigris cloud credentials

Our application requires credentials to be able to use Tigris. Let's generate the credentials and add them to the environment file.

Generating application credentials

tigris create application starter-todo-app "Starter todo application"

This command will create the credentials and print it on the terminal screen

Terminal
$ tigris create application starter-todo-app "Starter todo application"
{
"id": "client_id_here",
"name": "starter-todo-app",
"description": "Starter todo application",
"secret": "client_secret_here",
"created_at": 1668649071000,
"created_by": "auth0|xxx"
}

We will use the id and secret from the output and add them as TIGRIS_CLIENT_ID and TIGRIS_CLIENT_SECRET respectively in the file .env.development.local in my-tigris-app directory.

cd my-tigris-app

Now, let's create the environment file .env.development.local and add the application credentials generated above to it

.env.development.local
TIGRIS_URI=api.preview.tigrisdata.cloud
TIGRIS_CLIENT_ID=client_id_here
TIGRIS_CLIENT_SECRET=client_secret_here

Run

Run the app and see it automatically create your databases and collections

npm run dev
Output
Terminal
$ ➔  cd my-tigris-app
$ ➔ npm run dev ±[main]

> predev
> APP_ENV=development npm run setup


> setup
> npx ts-node scripts/setup.ts

Loaded env from ./my-tigris-app/.env.development
event - Scanning ./my-tigris-app/models/tigris for Tigris schema definitions
info - Found DB definition todoStarterApp
info - Found Schema file todoItems.ts in todoStarterApp
info - Found schema definition: TodoItemSchema
debug - Generated Tigris Manifest: [{"dbName":"todoStarterApp","collections":[{"collectionName":"todoItems","schema":{"id":{"type":"int32","primary_key":{"order":1,"autoGenerate":true}},"text":{"type":"string"},"completed":{"type":"boolean"}},"schemaName":"TodoItemSchema"}]}]
event - Created database: todoStarterApp
debug - {"title":"todoItems","additionalProperties":false,"type":"object","properties":{"id":{"type":"integer","format":"int32","autoGenerate":true},"text":{"type":"string"},"completed":{"type":"boolean"}},"collection_type":"documents","primary_key":["id"]}
event - Created collection: todoItems from schema: TodoItemSchema in db: todoStarterApp

> dev
> next dev

ready - started server on 0.0.0.0:3000, url: http://localhost:3000
info - Loaded env from ./my-tigris-app/.env.development
event - compiled client and server successfully in 856 ms (154 modules)

🎉 Your fullstack webapp is ready and accessible on localhost:3000 in the browser.

Guides

Here you will find a set of guides to help you easily build a dynamic data-rich Next.js app with Tigris.