DEV Community

Ovais Tariq for Tigris Data

Posted on • Edited on • Originally published at blog.tigrisdata.com

1

Bootstrap a Tigris and Next.js project using `create-next-app`

Happy to announce that Next.js now has an officially supported example for bootstrapping your projects using Tigris. Creating a project with Next.js and Tigris is as simple as:

$ npx create-next-app --example with-tigris
Enter fullscreen mode Exit fullscreen mode

Getting started

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

Install Tigris

Startup Tigris dev environment

$ tigris dev start
Enter fullscreen mode Exit fullscreen mode

Initialize your Next.js app

Use the official create-next-app utility

$ npx create-next-app --example with-tigris
Enter fullscreen mode Exit fullscreen mode
$ ➔  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
Enter fullscreen mode Exit fullscreen mode

Run the app

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

$ cd my-tigris-app
$ npm run dev
Enter fullscreen mode Exit fullscreen mode
$ 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)
Enter fullscreen mode Exit fullscreen mode

Sentry image

Hands-on debugging session: instrument, monitor, and fix

Join Lazar for a hands-on session where you’ll build it, break it, debug it, and fix it. You’ll set up Sentry, track errors, use Session Replay and Tracing, and leverage some good ol’ AI to find and fix issues fast.

RSVP here →

Top comments (0)

Eliminate Context Switching and Maximize Productivity

Pieces.app

Pieces Copilot is your personalized workflow assistant, working alongside your favorite apps. Ask questions about entire repositories, generate contextualized code, save and reuse useful snippets, and streamline your development process.

Learn more

👋 Kindness is contagious

Please leave a ❤️ or a friendly comment on this post if you found it helpful!

Okay