Digvijay Shelar
94 lines
2.2 KiB
Plaintext
94 lines
2.2 KiB
Plaintext
---
|
|
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:
|
|
|
|
|
|
|
|
</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>
|