Skip to main content

How to create a new Next.js project with Tigris using create-next-app

· 2 min read
Adil Ansari

We are happy to announce that Next.js now has an officially supported example for creating a new Next.js project with Tigris as its database.

Prerequisites​

System requirements​

Sign up​

To get started, go to the Tigris console and sign up.

Create a new Next.js project​

Use the official create-next-app utility to create a new Next.js project with Tigris as its database.

$ 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

Create a Tigris Project​

Now create a Tigris project for your Next.js application. Click on the Create a new project button from the Tigris Cloud dashboard.

The create a project dialog within the Tigris console web application

Use todoStarterApp as the project name.

Tigris will generate the necessary credentials for your application and provide you with a command to create the application code with Tigris pre-configured.

The create-tigirs-app terminal command displayed within a dialog within the Tigris web console

As you have already created a Next.js project using create-next-app utility, you don't need to run this command. Copy the project name, clientId, and clientSecret from the command shown and close the modal.

Configure environment variables​

Now that you have created a Tigris project set up the environment variables which will allow your application to connect with Tigris using the project name, clientId, and clientSecret from the previous step.

.env
TIGRIS_URI=api.preview.tigrisdata.cloud
TIGRIS_PROJECT=todoStarterApp
TIGRIS_CLIENT_ID=ftSUj9B5czFW79s9M6YUkxKE3H4WeRyY
TIGRIS_CLIENT_SECRET=DOxxx
TIGRIS_DB_BRANCH=main

Run the Next.js app​

Now run the app and see it automatically create your database and collection.

$ cd my-tigris-app
$ 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)

Go back to the Tigris web console to view your database and collection.

The Tigris database and collection created after running the Next.js application