---
title: "Next.js setup guide"
sidebarTitle: "Next.js"
description: "This guide will show you how to setup Trigger.dev in your existing Next.js project, test an example task, and view the run."
icon: "N"
---

import Prerequisites from "/snippets/framework-prerequisites.mdx";
import CliInitStep from "/snippets/step-cli-init.mdx";
import CliDevStep from "/snippets/step-cli-dev.mdx";
import CliRunTestStep from "/snippets/step-run-test.mdx";
import CliViewRunStep from "/snippets/step-view-run.mdx";
import UsefulNextSteps from "/snippets/useful-next-steps.mdx";
import TriggerTaskNextjs from "/snippets/trigger-tasks-nextjs.mdx";
import NextjsTroubleshootingMissingApiKey from "/snippets/nextjs-missing-api-key.mdx";
import NextjsTroubleshootingButtonSyntax from "/snippets/nextjs-button-syntax.mdx";
import WorkerFailedToStartWhenRunningDevCommand from "/snippets/worker-failed-to-start.mdx";
import AddEnvironmentVariables from "/snippets/add-environment-variables.mdx";
import DeployingYourTask from "/snippets/deplopying-your-task.mdx";

<Note>This guide can be followed for both App and Pages router as well as Server Actions.</Note>

<Prerequisites framework="Next.js" />

## Initial setup

<Steps>
  <CliInitStep />
  <CliDevStep />
  <CliRunTestStep />
  <CliViewRunStep />
</Steps>

## Set your secret key locally

Set your `TRIGGER_SECRET_KEY` environment variable in your `.env.local` file if using the Next.js App router or `.env` file if using Pages router. This key is used to authenticate with Trigger.dev, so you can trigger runs from your Next.js app. Visit the API Keys page in the dashboard and select the DEV secret key.

![How to find your secret key](/images/api-keys.png)

For more information on authenticating with Trigger.dev, see the [API keys page](/apikeys).

## Triggering your task in Next.js

Here are the steps to trigger your task in the Next.js App and Pages router and Server Actions. Alternatively, check out this repo for a [full working example](https://github.com/triggerdotdev/example-projects/tree/main/nextjs/server-actions/my-app) of a Next.js app with a Trigger.dev task triggered using a Server Action.

<Tabs>

  <Tab title="App Router">

  <Steps>

  <Step title="Create a Route Handler">

      Add a Route Handler by creating a `route.ts` file (or `route.js` file) in the `app/api` directory like this: `app/api/hello-world/route.ts`.

  </Step>

  <Step title="Add your task">

      Add this code to your `route.ts` file which imports your task along with `NextResponse` to handle the API route response:

      ```ts app/api/hello-world/route.ts
      // Next.js API route support: https://nextjs.org/docs/api-routes/introduction
      import type { helloWorldTask } from "@/trigger/example";
      import { tasks } from "@trigger.dev/sdk/v3";
      import { NextResponse } from "next/server";

      //tasks.trigger also works with the edge runtime
      //export const runtime = "edge";

      export async function GET() {
        const handle = await tasks.trigger<typeof helloWorldTask>(
          "hello-world",
          "James"
        );

        return NextResponse.json(handle);
      }
      ```

    </Step>

    <Step title="Trigger your task">

    <TriggerTaskNextjs/>

    </Step>

    </Steps>

    </Tab>

    <Tab title="App Router (Server Actions)">

    <Steps>

    <Step title="Create an `actions.ts` file">

      Create an `actions.ts` file in the `app/api` directory and add this code which imports your `helloWorldTask()` task. Make sure to include `"use server";` at the top of the file.

      ```ts app/api/actions.ts
        "use server";

        import type { helloWorldTask } from "@/trigger/example";
        import { tasks } from "@trigger.dev/sdk/v3";

        export async function myTask() {
          try {
            const handle = await tasks.trigger<typeof helloWorldTask>(
              "hello-world",
              "James"
            );

            return { handle };
          } catch (error) {
            console.error(error);
            return {
              error: "something went wrong",
            };
          }
        }
      ```

    </Step>

    <Step title="Create a button to trigger your task">

      For the purposes of this guide, we'll create a button with an `onClick` event that triggers your task. We'll add this to the `page.tsx` file so we can trigger the task by clicking the button. Make sure to import your task and include `"use client";` at the top of your file.

      ```ts app/page.tsx
      "use client";

      import { myTask } from "./actions";

      export default function Home() {
        return (
          <main className="flex min-h-screen flex-col items-center justify-center p-24">
            <button
              onClick={async () => {
                await myTask();
              }}
            >
              Trigger my task
            </button>
          </main>
        );
      }
      ```
    </Step>

    <Step title="Trigger your task">

    Run your Next.js app:

    <CodeGroup>

    ```bash npm
    npm run dev
    ```

    ```bash pnpm
    pnpm run dev
    ```

    ```bash yarn
    yarn dev
    ```

    </CodeGroup>

    Open your app in a browser, making sure the port number is the same as the one you're running your Next.js app on. For example, if you're running your Next.js app on port 3000, visit:

    ```bash
    http://localhost:3000
    ```

    Run the dev server from Step 2. of the [Initial Setup](/guides/frameworks/nextjs#initial-setup) section above if it's not already running:

    <CodeGroup>

    ```bash npm
    npx trigger.dev@latest dev
    ```

    ```bash pnpm
    pnpm dlx trigger.dev@latest dev
    ```

    ```bash yarn
    yarn dlx trigger.dev@latest dev
    ```

    </CodeGroup>

    Then click the button we created in your app to trigger the task. You should see the CLI log the task run with a link to view the logs.

    ![Trigger.dev CLI showing a successful run](/images/trigger-cli-run-success.png)

    Visit the [Trigger.dev dashboard](https://cloud.trigger.dev) to see your run.

    </Step>

    </Steps>

    </Tab>

    <Tab title="Pages Router">

    <Steps>

    <Step title="Create an API route">

      Create an API route in the `pages/api` directory. Then create a `hello-world .ts` (or `hello-world.js`) file for your task and copy this code example:

      ```ts pages/api/hello-world.ts
      // Next.js API route support: https://nextjs.org/docs/api-routes/introduction
      import { helloWorldTask } from "@/trigger/example";
      import { tasks } from "@trigger.dev/sdk/v3";
      import type { NextApiRequest, NextApiResponse } from "next";

      export default async function handler(
        req: NextApiRequest,
        res: NextApiResponse<{ id: string }>
      ) {
        const handle = await tasks.trigger<typeof helloWorldTask>(
        "hello-world",
        "James"
        );

        res.status(200).json(handle);
      }
      ```
    </Step>

    <Step title="Trigger your task">

    <TriggerTaskNextjs/>

    </Step>

    </Steps>

    </Tab>

</Tabs>

<AddEnvironmentVariables />

<DeployingYourTask />

## Troubleshooting

    <NextjsTroubleshootingMissingApiKey/>
    <NextjsTroubleshootingButtonSyntax/>
    <WorkerFailedToStartWhenRunningDevCommand/>

## Additional resources for Next.js

<Card
  title="Next.js - triggering tasks using webhooks"
  icon="N"
  href="/guides/frameworks/nextjs-webhooks"
>
  How to create a webhook handler in a Next.js app, and trigger a task from it.
</Card>

<UsefulNextSteps />
