James Ritchie
302 lines
8.6 KiB
Plaintext
302 lines
8.6 KiB
Plaintext
---
|
|
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';
|
|
|
|
<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.
|
|
|
|
|
|
|
|
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(request: Request) {
|
|
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@beta dev
|
|
```
|
|
|
|
```bash pnpm
|
|
pnpm dlx trigger.dev@beta dev
|
|
```
|
|
|
|
```bash yarn
|
|
yarn dlx trigger.dev@beta 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.
|
|
|
|
|
|
|
|
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>
|
|
|
|
## Add your environment variables (optional)
|
|
|
|
If you have any environment variables in your tasks, be sure to add them in the dashboard so deployed code runs successfully. In Node.js, these environment variables are accessed in your code using `process.env.MY_ENV_VAR`.
|
|
|
|
In the sidebar select the "Environment Variables" page, then press the "New environment variable"
|
|
button. 
|
|
|
|
You can add values for your local dev environment, staging and prod. 
|
|
|
|
You can also add environment variables in code by following the steps on the [Environment Variables page](/deploy-environment-variables#in-your-code).
|
|
|
|
## Deploying your task in Next.js
|
|
|
|
For this guide, we'll manually deploy your task by running the [CLI deploy command](/cli-deploy) below. Other ways to deploy are listed in the next section.
|
|
|
|
<CodeGroup>
|
|
|
|
```bash npm
|
|
npx trigger.dev@beta deploy
|
|
```
|
|
|
|
```bash pnpm
|
|
pnpm dlx trigger.dev@beta deploy
|
|
```
|
|
|
|
```bash yarn
|
|
yarn dlx trigger.dev@beta deploy
|
|
```
|
|
|
|
</CodeGroup>
|
|
|
|
### Other ways to deploy
|
|
|
|
<Tabs>
|
|
|
|
<Tab title="GitHub Actions">
|
|
|
|
Use GitHub Actions to automatically deploy your tasks whenever new code is pushed and when the `trigger` directory has changes in it. Follow [this guide](/github-actions) to set up GitHub Actions.
|
|
|
|
</Tab>
|
|
|
|
<Tab title="Vercel Integration">
|
|
|
|
We're working on adding an official [Vercel integration](/vercel-integration) which you can follow the progress of [here](https://feedback.trigger.dev/p/vercel-integration-3).
|
|
|
|
</Tab>
|
|
|
|
</Tabs>
|
|
|
|
## Troubleshooting
|
|
|
|
<NextjsTroubleshootingMissingApiKey/>
|
|
<NextjsTroubleshootingButtonSyntax/>
|
|
<WorkerFailedToStartWhenRunningDevCommand/>
|
|
|
|
<UsefulNextSteps />
|