Next.js Quick Start

Start creating Jobs in 5 minutes in your Next.js project.

This quick start guide will get you up and running with Trigger.dev.

Need to create a new Next.js project to add Trigger.dev to?

No problem, create a blank project by running the create-next-app command in your terminal then continue with this quickstart guide as normal:

npx create-next-app@latest

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

1. Create a Trigger.dev account

   You can either:

   • Use the Trigger.dev Cloud.
   • Or self-host the service.
2. Create your first project

   Once you've created an account, follow the steps in the app to:

   1. Complete your account details.
   2. Create your first Organization and Project.
3. Getting an API key

   1. Go to the "Environments & API Keys" page in your project.

   2. Copy the DEV SERVER API key.

4. Run the CLI `init` command

   The easiest way to get started it to use the CLI. It will add Trigger.dev to your existing project, setup a route and give you an example file.

   In a terminal window run:

   npm

   npx @trigger.dev/cli@latest init
   

   It will ask you a couple of questions

   1. Are you using the Trigger.dev Cloud or self-hosting?
   2. Enter your development API key. Enter the key you copied earlier.
5. Run your site

   Make sure your site is running locally, we will connect to it to register your Jobs.

   npm

   npm run dev
   

6. Run the CLI `dev` command

   The CLI dev command allows the Trigger.dev service to send messages to your site. This is required for registering Jobs, triggering them and running tasks. To achieve this it creates a tunnel (using ngrok) so Trigger.dev can send messages to your machine.

   You should leave the dev command running when you're developing.

   In a new terminal window or tab run:

   npm

   npx @trigger.dev/cli@latest dev
   

   
   

   You can optionally pass the port if you're not running on the default port by adding --port 3001 to the end.

   Experiencing an error? This could be due to middleware.

   Instructions of how to resolve any issues due to middleware here

   Advanced: Run your Next.js server together with the CLI

   You can modify your package.json to run both the Next.js server and the CLI dev command together.

   1. Install the concurrently package:

   npm

   npm install concurrently --save-dev
   

   2. Modify your package.json file’s dev script.

   package.json

   ...
   "scripts": {
     "dev": "concurrently --kill-others npm:dev:*",
     "dev:next": "next dev",
     "dev:trigger": "npx @trigger.dev/cli dev",
     //...
   }
   ...
   

7. Your first job

   The CLI init command created a simple Job for you. There will be a new file either src/jobs/examples.(ts/js) or jobs/examples.(ts/js).

   In there is this Job:

   // Your first job
   // This Job will be triggered by an event, log a joke to the console, and then wait 5 seconds before logging the punchline
   client.defineJob({
     // This is the unique identifier for your Job, it must be unique across all Jobs in your project
     id: "example-job",
     name: "Example Job: a joke with a delay",
     version: "0.0.1",
     // This is triggered by an event using eventTrigger. You can also trigger Jobs with webhooks, on schedules, and more: https://trigger.dev/docs/documentation/concepts/triggers/introduction
     trigger: eventTrigger({
       name: "example.event",
     }),
     run: async (payload, io, ctx) => {
       // This logs a message to the console
       await io.logger.info("🧪 Example Job: a joke with a delay");
       await io.logger.info("How do you comfort a JavaScript bug?");
       // This waits for 5 seconds, the second parameter is the number of seconds to wait, you can add delays of up to a year
       await io.wait("Wait 5 seconds for the punchline...", 5);
       await io.logger.info("You console it! 🤦");
       await io.logger.info(
         "✨ Congratulations, You just ran your first successful Trigger.dev Job! ✨"
       );
       // To learn how to write much more complex (and probably funnier) Jobs, check out our docs: https://trigger.dev/docs/documentation/guides/create-a-job
     },
   });
   

   If you navigate to your Trigger.dev project you will see this Job in the “Jobs” section:

   

8. Triggering the Job

   There are two way to trigger this Job.

   1. Use the "Test" functionality in the dashboard.
   2. Use the Trigger.dev API (either via our SDK or a web request)

   "Testing" from the dashboard

   Click into the Job and then open the "Test" tab. You should see this page:

   

   This Job doesn't have a payload schema (meaning it takes an empty object), so you can simple click the "Run test" button.

   Congratulations, you should get redirected so you can see your first Run!

What's next?

Write your first Job

A Guide for how to create your first real Job

What is Trigger.dev

Learn more about how Trigger.dev works and how it can help you.

Examples

Find code examples for many popular APIs. These can be copied / modified for use in your own projects.

Get help

Struggling getting setup or have a question? We're here to help.

React hooks

Show the live status of Job Runs in your React app