Next.js

How to manually setup Trigger.dev in your Next.js project

Don't have a Next.js project yet to add Trigger.dev to? No problem, you can complete the Manual Setup using a blank Next.js project:

Create a blank project by running the create-next-app command in your terminal:

npx create-next-app@latest

Trigger.dev works with either the Pages or App Router configuration.

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

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

Ensure that you execute this command within a Next.js project.

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:

src/trigger.(ts/js)

// 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

1. Create a new file named route.(ts/js) within the app/api/trigger/ directory.
2. Add the following code to route.(ts/js):

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

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

1. Create a new file named route.(ts/js) within the app/api/trigger/ directory.
2. Add the following code to route.(ts/js):

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

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

1. Create a new file named trigger.(ts/js) within the pages/api/ directory.
2. Add the following code to trigger.(ts/js):

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

const { handler, config } = createPagesRoute(client);
export { config };
export default handler;

In the code blocks, replace ”@/trigger” with the appropriate path to your Trigger Client configuration file, and adjust the path to the Jobs folder accordingly. Make sure to provide the correct paths if your project isn’t utilizing the Next.js alias feature.

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).

example.(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

npm run dev

Run the CLI ‘dev’ command

In a separate terminal window or tab run:

npm

npx @trigger.dev/cli@latest dev

You can optionally pass the port if you’re not running on 3000 by adding --port 3001 to the end

You can optionally pass the hostname if you’re not running on localhost by adding --hostname <host>. Example, in case your Remix is running on 0.0.0.0: --hostname 0.0.0.0.

If your existing Next.js project utilizes middleware and you encounter any issues, such as potential conflicts with Trigger.dev, it’s recommended to refer to the troubleshooting guide at Middleware for assistance. This guide can help you address any concerns related to middleware conflicts and ensure the smooth functioning of your project with Trigger.dev.

Assistant

Responses are generated using AI and may contain mistakes.