---
title: "Next.js Quick Start"
sidebarTitle: "Next.js"
description: "Start creating Jobs in 5 minutes in your Next.js project."
icon: "N"
---

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

<Accordion title="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:

```bash
npx create-next-app@latest
```

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

</Accordion>

<Steps titleSize="h3">
<Snippet file="quickstart-setup-steps.mdx" />

<Step title="Run the CLI `dev` command">

<Snippet file="quickstart-cli-dev.mdx" />

<AccordionGroup>
<Accordion title="Experiencing an error? This could be due to middleware.">
Instructions of how to resolve any issues due to middleware [here](https://trigger.dev/docs/documentation/guides/platforms/nextjs#middleware)
</Accordion>

<Accordion title="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:

  <CodeGroup>

```bash npm
npm install concurrently --save-dev
```

```bash pnpm
pnpm install concurrently --save-dev
```

```bash yarn
yarn add concurrently --dev
```

</CodeGroup>

2. Modify your `package.json` file's `dev` script.

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

</Accordion>
</AccordionGroup>

</Step>

<Step title="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:

<Snippet file="quickstart-example-job.mdx" />

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

![Your first Job](/images/first-job.png)

</Step>

<Snippet file="quickstart-running-your-job.mdx" />

</Steps>

<Snippet file="quickstart-whats-next.mdx" />
<CardGroup cols={2}>
  <Snippet file="card-react-hooks.mdx" />
</CardGroup>
