Next.js

npx create-next-app@latest

​

Installing Required Packages

To begin, install the necessary packages in your Next.js project directory. You can choose one of the following package managers:

npm i @trigger.dev/sdk @trigger.dev/nextjs

​

Obtaining the Development API Key

To locate your development API key, login to the Trigger.dev dashboard and select the Project you want to connect to. Then click on the Environments & API Keys tab in the left menu. You can copy your development API Key from the field at the top of this page. (Your development key will start with tr_dev_).

​

Adding Environment Variables

Create a .env.local file at the root of your project and include your Trigger API key and URL like this:

TRIGGER_API_KEY=ENTER_YOUR_DEVELOPMENT_API_KEY_HERE
TRIGGER_API_URL=https://api.trigger.dev # this is only necessary if you are self-hosting

Replace ENTER_YOUR_DEVELOPMENT_API_KEY_HERE with the actual API key obtained from the previous step.

​

Configuring the Trigger Client

Create a file at <root>/src/trigger.ts or <root>/trigger.ts depending on whether you’re using the src directory or not. <root> represents the root directory of your project.

Next, add the following code to the file which creates and exports a new TriggerClient:

// trigger.ts (for TypeScript) or trigger.js (for JavaScript)

import { TriggerClient } from "@trigger.dev/sdk";

export const client = new TriggerClient({
  id: "my-app",
  apiKey: process.env.TRIGGER_API_KEY,
  apiUrl: process.env.TRIGGER_API_URL,
});

Replace “my-app” with an appropriate identifier for your project.

​

Creating the API Route

To establish an API route for interacting with Trigger.dev, follow these steps based on your project’s file type and structure

• App Directory

• Pages Directory

import { createAppRoute } from "@trigger.dev/nextjs";
import { client } from "@/trigger";
import "@/Jobs";

export const { POST, dynamic } = createAppRoute(client);

​

Creating the Example Job

1. Create a folder named Jobs alongside your app or pages directory
2. Inside the Jobs folder, add two files named example.(ts/js) and index.(ts/js).

import { eventTrigger } from "@trigger.dev/sdk";
import { client } from "@/trigger";

// your first job
client.defineJob({
  id: "example-job",
  name: "Example Job",
  version: "0.0.1",
  trigger: eventTrigger({
    name: "example.event",
  }),
  run: async (payload, io, ctx) => {
    await io.logger.info("Hello world!", { payload });

    return {
      message: "Hello world!",
    };
  },
});

​

Additonal Job Definitions

You can define more job definitions by creating additional files in the Jobs folder and exporting them in index file.

For example, in index.(ts/js), you can export other job files like this:

// import all your job files here

export * from "./examples";
export * from "./other-job-file";

​

Adding Configuration to package.json

Inside the package.json file, add the following configuration under the root object:

"trigger.dev": {
  "endpointId": "my-app"
}

Your package.json file might look something like this:

{
  "name": "my-app",
  "version": "1.0.0",
  "dependencies": {
    // ... other dependencies
  },
  "trigger.dev": {
    "endpointId": "my-app"
  }
}

Replace “my-app” with the appropriate identifier you used during the step for creating the Trigger Client.

​

Running

​

Run your Next.js app

Run your Next.js app locally, like you normally would. For example:

npm run dev

​

Run the CLI ‘dev’ command

In a separate terminal window or tab run:

npx @trigger.dev/cli@latest dev