Skip to content

Commit fc50453

Browse files
D-K-PD-K-P
authored
Merge pull request #100 from triggerdotdev/trigger-nextjs-hello-world
Added basic trigger + nextjs hello world
2 parents 5054351 + 34dd9a9 commit fc50453

File tree

17 files changed

+2599
-0
lines changed

17 files changed

+2599
-0
lines changed

‎README.md‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -33,6 +33,7 @@ For information on how to run each project, see the README in each directory.
3333
| [Company enrichment tool](/smart-spreadsheet) | AI-powered company enrichment tool. Enter a company name or URL, get verified data with source links. Uses [Supabase](https://supabase.com), [AI SDK](https://sdk.vercel.ai/docs/introduction), [Trigger.dev](https://trigger.dev) and [Exa](https://exa.ai) |
3434
| [Deep research agent using the AI SDK](/vercel-ai-sdk-deep-research-agent/) | An intelligent deep research agent using the Vercel [AI SDK](https://sdk.vercel.ai/docs/introduction) and Trigger.dev |
3535
| [Monorepos](/monorepos) | Examples of using Trigger.dev in monorepo setups with [Turborepo](https://turbo.build/) and [Prisma](https://www.prisma.io/) |
36+
| [Next.js + Trigger hello world](/trigger-nextjs-hello-world) | A simple example of how to use Trigger.dev in a [Next.js app](https://nextjs.org/) |
3637
| [Next.js server actions](/nextjs-server-actions) | A [Next.js app](https://nextjs.org/) that triggers Trigger.dev tasks using Server Actions |
3738
| [Next.js webhooks](/nextjs-webhooks) | Example of triggering tasks from incoming webhooks in a [Next.js app](https://nextjs.org/) with Trigger.dev |
3839
| [Mastra agents](/mastra-agents) | Example of using [Mastra](https://github.com/mastra-ai/mastra) agents with Trigger.dev |

‎trigger-nextjs-hello-world/.env.example‎

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,2 @@
1+
# Get from https://cloud.trigger.dev
2+
TRIGGER_SECRET_KEY=tr_dev_xxx

‎trigger-nextjs-hello-world/.gitignore‎

Lines changed: 32 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,32 @@
1+
# dependencies
2+
node_modules/
3+
4+
# next.js
5+
.next/
6+
out/
7+
8+
# env
9+
.env
10+
.env.*
11+
!.env.example
12+
13+
# trigger.dev
14+
.trigger/
15+
16+
# debug
17+
npm-debug.log*
18+
yarn-debug.log*
19+
yarn-error.log*
20+
pnpm-debug.log*
21+
22+
# os
23+
.DS_Store
24+
Thumbs.db
25+
26+
# typescript
27+
*.tsbuildinfo
28+
next-env.d.ts
29+
30+
# ide
31+
.vscode/
32+
.idea/

‎trigger-nextjs-hello-world/README.md‎

Lines changed: 34 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,34 @@
1+
# Next.js + Trigger.dev Hello World
2+
3+
[![Deploy with Vercel](https://vercel.com/button)](https://vercel.com/new/clone?repository-url=https://github.com/triggerdotdev/trigger-nextjs-hello-world)
4+
5+
A minimal Next.js app that triggers a background task from an API route. Click a button, fire a task, watch it run on [Trigger.dev](https://trigger.dev).
6+
7+
The whole thing is ~20 lines of task code in `trigger/hello-world.ts`.
8+
9+
## How it works
10+
11+
1. The frontend calls `POST /api/hello`
12+
2. The API route triggers the `hello-world` task using the Trigger.dev SDK
13+
3. The task runs on Trigger.dev's infrastructure (with retries, logging, the works)
14+
15+
## Local dev
16+
17+
```bash
18+
cp .env.example .env.local
19+
# Add your TRIGGER_SECRET_KEY from cloud.trigger.dev
20+
pnpm install
21+
pnpm dev # Next.js on :3000
22+
npx trigger dev # Trigger.dev dev server
23+
```
24+
25+
## Deploy to Vercel
26+
27+
Click the deploy button above, then install the [Trigger.dev Vercel integration](https://vercel.com/marketplace/trigger) to automatically sync your environment variables.
28+
29+
## Learn more about Trigger.dev
30+
31+
- [Quick start](https://trigger.dev/docs/quick-start)
32+
- [Writing tasks](https://trigger.dev/docs/tasks/overview)
33+
- [Realtime](https://trigger.dev/docs/realtime)
34+
- [Scheduled tasks](https://trigger.dev/docs/tasks/scheduled)

‎trigger-nextjs-hello-world/app/api/hello/route.ts‎

Lines changed: 25 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,25 @@
1+
import { NextResponse } from "next/server";
2+
import { tasks } from "@trigger.dev/sdk/v3";
3+
import type { helloWorldTask } from "@/trigger/hello-world";
4+
5+
export async function POST() {
6+
try {
7+
const handle = await tasks.trigger<typeof helloWorldTask>("hello-world", {
8+
message: "Hello world",
9+
});
10+
11+
return NextResponse.json({
12+
id: handle.id,
13+
publicAccessToken: handle.publicAccessToken,
14+
});
15+
} catch (error) {
16+
return NextResponse.json(
17+
{
18+
error: error instanceof Error
19+
? error.message
20+
: "Failed to trigger task",
21+
},
22+
{ status: 500 },
23+
);
24+
}
25+
}

‎trigger-nextjs-hello-world/app/components/trigger-logo.tsx‎

Lines changed: 196 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,196 @@
1+
export function TriggerLogo({ className }: { className?: string }) {
2+
return (
3+
<svg
4+
className={className}
5+
aria-label="Trigger.dev logo"
6+
viewBox="0 0 136 24"
7+
fill="none"
8+
xmlns="http://www.w3.org/2000/svg"
9+
>
10+
<path
11+
d="M35.0754 3.21039H24.3296H24.7541V6.13998H28.3721V18.7461H31.4352V6.13998H35.0754V3.21039Z"
12+
fill="url(#paint0_linear_12475_3849)"
13+
/>
14+
<path
15+
d="M38.0053 9.55785V7.64917H35.142V18.7461H38.0053V13.4418C38.0053 11.1114 39.892 10.4456 41.3792 10.6231V7.42723C39.9808 7.42723 38.5825 8.04866 38.0053 9.55785Z"
16+
fill="url(#paint1_linear_12475_3849)"
17+
/>
18+
<path
19+
d="M44.4425 6.31754C45.4191 6.31754 46.2182 5.51855 46.2182 4.56422C46.2182 3.60988 45.4191 2.7887 44.4425 2.7887C43.4881 2.7887 42.689 3.60988 42.689 4.56422C42.689 5.51855 43.4881 6.31754 44.4425 6.31754ZM43.0219 18.7461H45.8853V7.64917H43.0219V18.7461Z"
20+
fill="url(#paint2_linear_12475_3849)"
21+
/>
22+
<path
23+
d="M56.7617 7.64918V9.02519C55.9848 7.98208 54.7862 7.33847 53.2103 7.33847C50.0584 7.33847 47.6834 9.91295 47.6834 13.0201C47.6834 16.1494 50.0584 18.7017 53.2103 18.7017C54.7862 18.7017 55.9848 18.0581 56.7617 17.015V18.2135C56.7617 19.9668 55.6519 20.9433 53.854 20.9433C52.1448 20.9433 51.4124 20.2553 50.9462 19.3898L48.5046 20.788C49.4813 22.5857 51.3902 23.4956 53.7652 23.4956C56.6951 23.4956 59.5585 21.8533 59.5585 18.2135V7.64918H56.7617ZM53.6542 16.0607C51.8563 16.0607 50.5467 14.7956 50.5467 13.0201C50.5467 11.2668 51.8563 10.0017 53.6542 10.0017C55.4521 10.0017 56.7617 11.2668 56.7617 13.0201C56.7617 14.7956 55.4521 16.0607 53.6542 16.0607Z"
24+
fill="url(#paint3_linear_12475_3849)"
25+
/>
26+
<path
27+
d="M70.4127 7.64918V9.02519C69.6358 7.98208 68.4372 7.33847 66.8612 7.33847C63.7094 7.33847 61.3343 9.91295 61.3343 13.0201C61.3343 16.1494 63.7094 18.7017 66.8612 18.7017C68.4372 18.7017 69.6358 18.0581 70.4127 17.015V18.2135C70.4127 19.9668 69.3029 20.9433 67.5049 20.9433C65.7958 20.9433 65.0633 20.2553 64.5972 19.3898L62.1556 20.788C63.1322 22.5857 65.0411 23.4956 67.4162 23.4956C70.3461 23.4956 73.2094 21.8533 73.2094 18.2135V7.64918H70.4127ZM67.3052 16.0607C65.5073 16.0607 64.1977 14.7956 64.1977 13.0201C64.1977 11.2668 65.5073 10.0017 67.3052 10.0017C69.1031 10.0017 70.4127 11.2668 70.4127 13.0201C70.4127 14.7956 69.1031 16.0607 67.3052 16.0607Z"
28+
fill="url(#paint4_linear_12475_3849)"
29+
/>
30+
<path
31+
d="M77.9818 14.3739H86.3499C86.4165 13.9966 86.4609 13.6193 86.4609 13.1977C86.4609 9.93515 84.1302 7.33847 80.8452 7.33847C77.3603 7.33847 74.9853 9.89077 74.9853 13.1977C74.9853 16.5046 77.3381 19.0569 81.0671 19.0569C83.198 19.0569 84.8627 18.1913 85.906 16.6821L83.5975 15.3505C83.1092 15.9941 82.2214 16.4602 81.1115 16.4602C79.6022 16.4602 78.3814 15.8387 77.9818 14.3739ZM77.9374 12.1545C78.2704 10.7341 79.3136 9.91295 80.8452 9.91295C82.0438 9.91295 83.2424 10.5566 83.5975 12.1545H77.9374Z"
32+
fill="url(#paint5_linear_12475_3849)"
33+
/>
34+
<path
35+
d="M91.0224 9.55785V7.64917H88.1591V18.7461H91.0224V13.4418C91.0224 11.1114 92.9091 10.4456 94.3963 10.6231V7.42723C92.9979 7.42723 91.5995 8.04866 91.0224 9.55785Z"
36+
fill="url(#paint6_linear_12475_3849)"
37+
/>
38+
<path
39+
d="M95.4839 19.0348C96.5271 19.0348 97.3706 18.1915 97.3706 17.1483C97.3706 16.1052 96.5271 15.2619 95.4839 15.2619C94.4406 15.2619 93.5972 16.1052 93.5972 17.1483C93.5972 18.1915 94.4406 19.0348 95.4839 19.0348Z"
40+
fill="url(#paint7_linear_12475_3849)"
41+
/>
42+
<path
43+
d="M107.514 3.21057V8.95879C106.715 7.93787 105.539 7.33864 103.918 7.33864C100.944 7.33864 98.5026 9.89094 98.5026 13.1978C98.5026 16.5047 100.944 19.057 103.918 19.057C105.539 19.057 106.715 18.4578 107.514 17.4369V18.7463H110.378V3.21057L107.514 3.21057ZM104.451 16.3272C102.675 16.3272 101.366 15.0621 101.366 13.1978C101.366 11.3335 102.675 10.0685 104.451 10.0685C106.205 10.0685 107.514 11.3335 107.514 13.1978C107.514 15.0621 106.205 16.3272 104.451 16.3272Z"
44+
fill="url(#paint8_linear_12475_3849)"
45+
/>
46+
<path
47+
d="M114.972 14.3741H123.34C123.407 13.9968 123.451 13.6195 123.451 13.1978C123.451 9.93534 121.121 7.33865 117.836 7.33865C114.351 7.33865 111.976 9.89095 111.976 13.1978C111.976 16.5047 114.329 19.057 118.058 19.057C120.188 19.057 121.853 18.1915 122.896 16.6823L120.588 15.3507C120.1 15.9943 119.212 16.4604 118.102 16.4604C116.593 16.4604 115.372 15.8389 114.972 14.3741ZM114.928 12.1547C115.261 10.7343 116.304 9.91314 117.836 9.91314C119.034 9.91314 120.233 10.5568 120.588 12.1547H114.928Z"
48+
fill="url(#paint9_linear_12475_3849)"
49+
/>
50+
<path
51+
d="M132.086 7.64936L129.378 15.4172L126.692 7.64936H123.54L127.757 18.7463H131.02L135.238 7.64936H132.086Z"
52+
fill="url(#paint10_linear_12475_3849)"
53+
/>
54+
<path
55+
fillRule="evenodd"
56+
clipRule="evenodd"
57+
d="M6.33197 7.92275L10.6153 0.504761L21.2306 18.8892H0L4.28333 11.4709L7.31329 13.2202L6.06014 15.3905H15.1705L10.6153 7.50183L9.36215 9.67219L6.33197 7.92275Z"
58+
fill="url(#paint11_linear_12475_3849)"
59+
/>
60+
<defs>
61+
<linearGradient
62+
id="paint0_linear_12475_3849"
63+
x1="59.3629"
64+
y1="27.3461"
65+
x2="59.3629"
66+
y2="2.7887"
67+
gradientUnits="userSpaceOnUse"
68+
>
69+
<stop stopColor="#41FF54" />
70+
<stop offset="1" stopColor="#E7FF52" />
71+
</linearGradient>
72+
<linearGradient
73+
id="paint1_linear_12475_3849"
74+
x1="59.3629"
75+
y1="27.3461"
76+
x2="59.3629"
77+
y2="2.7887"
78+
gradientUnits="userSpaceOnUse"
79+
>
80+
<stop stopColor="#41FF54" />
81+
<stop offset="1" stopColor="#E7FF52" />
82+
</linearGradient>
83+
<linearGradient
84+
id="paint2_linear_12475_3849"
85+
x1="59.3629"
86+
y1="27.3461"
87+
x2="59.3629"
88+
y2="2.7887"
89+
gradientUnits="userSpaceOnUse"
90+
>
91+
<stop stopColor="#41FF54" />
92+
<stop offset="1" stopColor="#E7FF52" />
93+
</linearGradient>
94+
<linearGradient
95+
id="paint3_linear_12475_3849"
96+
x1="59.3629"
97+
y1="27.3461"
98+
x2="59.3629"
99+
y2="2.7887"
100+
gradientUnits="userSpaceOnUse"
101+
>
102+
<stop stopColor="#41FF54" />
103+
<stop offset="1" stopColor="#E7FF52" />
104+
</linearGradient>
105+
<linearGradient
106+
id="paint4_linear_12475_3849"
107+
x1="59.3629"
108+
y1="27.3461"
109+
x2="59.3629"
110+
y2="2.7887"
111+
gradientUnits="userSpaceOnUse"
112+
>
113+
<stop stopColor="#41FF54" />
114+
<stop offset="1" stopColor="#E7FF52" />
115+
</linearGradient>
116+
<linearGradient
117+
id="paint5_linear_12475_3849"
118+
x1="59.3629"
119+
y1="27.3461"
120+
x2="59.3629"
121+
y2="2.7887"
122+
gradientUnits="userSpaceOnUse"
123+
>
124+
<stop stopColor="#41FF54" />
125+
<stop offset="1" stopColor="#E7FF52" />
126+
</linearGradient>
127+
<linearGradient
128+
id="paint6_linear_12475_3849"
129+
x1="59.3629"
130+
y1="27.3461"
131+
x2="59.3629"
132+
y2="2.7887"
133+
gradientUnits="userSpaceOnUse"
134+
>
135+
<stop stopColor="#41FF54" />
136+
<stop offset="1" stopColor="#E7FF52" />
137+
</linearGradient>
138+
<linearGradient
139+
id="paint7_linear_12475_3849"
140+
x1="114.417"
141+
y1="25.4773"
142+
x2="117.399"
143+
y2="4.96095"
144+
gradientUnits="userSpaceOnUse"
145+
>
146+
<stop stopColor="#2563EB" />
147+
<stop offset="1" stopColor="#A855F7" />
148+
</linearGradient>
149+
<linearGradient
150+
id="paint8_linear_12475_3849"
151+
x1="114.417"
152+
y1="25.4773"
153+
x2="117.399"
154+
y2="4.96095"
155+
gradientUnits="userSpaceOnUse"
156+
>
157+
<stop stopColor="#2563EB" />
158+
<stop offset="1" stopColor="#A855F7" />
159+
</linearGradient>
160+
<linearGradient
161+
id="paint9_linear_12475_3849"
162+
x1="114.417"
163+
y1="25.4773"
164+
x2="117.399"
165+
y2="4.96095"
166+
gradientUnits="userSpaceOnUse"
167+
>
168+
<stop stopColor="#2563EB" />
169+
<stop offset="1" stopColor="#A855F7" />
170+
</linearGradient>
171+
<linearGradient
172+
id="paint10_linear_12475_3849"
173+
x1="114.417"
174+
y1="25.4773"
175+
x2="117.399"
176+
y2="4.96095"
177+
gradientUnits="userSpaceOnUse"
178+
>
179+
<stop stopColor="#2563EB" />
180+
<stop offset="1" stopColor="#A855F7" />
181+
</linearGradient>
182+
<linearGradient
183+
id="paint11_linear_12475_3849"
184+
x1="17.1895"
185+
y1="18.8892"
186+
x2="16.9913"
187+
y2="5.91038"
188+
gradientUnits="userSpaceOnUse"
189+
>
190+
<stop stopColor="#41FF54" />
191+
<stop offset="1" stopColor="#E7FF52" />
192+
</linearGradient>
193+
</defs>
194+
</svg>
195+
);
196+
}

‎trigger-nextjs-hello-world/app/favicon.ico‎

14.7 KB
Binary file not shown.

‎trigger-nextjs-hello-world/app/globals.css‎

Lines changed: 30 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,30 @@
1+
@import "tailwindcss";
2+
3+
@theme {
4+
--color-background: #121317;
5+
--color-background-bright: #15171a;
6+
--color-card: #15171a;
7+
--color-charcoal-900: #0d0e11;
8+
--color-charcoal-800: #121317;
9+
--color-charcoal-750: #15171a;
10+
--color-charcoal-700: #1c1e21;
11+
--color-charcoal-600: #272a2e;
12+
--color-charcoal-500: #3b3e44;
13+
--color-text-bright: #d7d9dd;
14+
--color-text-dimmed: #878c99;
15+
--color-primary: #a8ff53;
16+
--color-grid-dimmed: #1c1e21;
17+
--color-grid-bright: #272a2e;
18+
--color-lavender: #7c7dff;
19+
--font-title: "Satoshi", "Geist", system-ui, sans-serif;
20+
--font-body: "Geist", system-ui, sans-serif;
21+
--font-mono: "Geist Mono", "SF Mono", monospace;
22+
}
23+
24+
body {
25+
background: var(--color-background);
26+
color: var(--color-text-bright);
27+
font-family: var(--font-body);
28+
-webkit-font-smoothing: antialiased;
29+
-moz-osx-font-smoothing: grayscale;
30+
}

‎trigger-nextjs-hello-world/app/layout.tsx‎

Lines changed: 25 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,25 @@
1+
import { Geist, Geist_Mono } from "next/font/google";
2+
import "./globals.css";
3+
4+
const geist = Geist({ subsets: ["latin"], variable: "--font-geist" });
5+
const geistMono = Geist_Mono({
6+
subsets: ["latin"],
7+
variable: "--font-geist-mono",
8+
});
9+
10+
export const metadata = {
11+
title: "Hello, Trigger.dev",
12+
description: "A Trigger.dev hello world example with Next.js",
13+
};
14+
15+
export default function RootLayout({
16+
children,
17+
}: {
18+
children: React.ReactNode;
19+
}) {
20+
return (
21+
<html lang="en" className={`${geist.variable} ${geistMono.variable}`}>
22+
<body>{children}</body>
23+
</html>
24+
);
25+
}

0 commit comments

Comments
 (0)