Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

add inngest next.js example #56049

Merged
merged 11 commits into from
Oct 28, 2023
2 changes: 2 additions & 0 deletions examples/inngest/.env.development
Original file line number Diff line number Diff line change
@@ -0,0 +1,2 @@
INNGEST_EVENT_KEY=your-event-key
INNGEST_SIGNING_KEY=your-signing-key
35 changes: 35 additions & 0 deletions examples/inngest/.gitignore
Original file line number Diff line number Diff line change
@@ -0,0 +1,35 @@
# See https://help.github.com/articles/ignoring-files/ for more about ignoring files.

# dependencies
/node_modules
/.pnp
.pnp.js

# testing
/coverage

# next.js
/.next/
/out/

# production
/build

# misc
.DS_Store
*.pem

# debug
npm-debug.log*
yarn-debug.log*
yarn-error.log*

# local env files
.env*.local

# vercel
.vercel

# typescript
*.tsbuildinfo
next-env.d.ts
54 changes: 54 additions & 0 deletions examples/inngest/README.md
Original file line number Diff line number Diff line change
@@ -0,0 +1,54 @@
# Next.js and Inngest Example

This is an example of how to use [Inngest](https://inngest.com) to easily add durable work flows to your Next.js application. It keeps things simple:

- bare bones examples with a single button UI that triggers an event
- runs the Inngest dev server locally for immediate feedback
leerob marked this conversation as resolved.
Show resolved Hide resolved

## Deploy your own

Deploy the example using [Vercel](https://vercel.com?utm_source=github&utm_medium=readme&utm_campaign=next-example):

[![Deploy with Vercel](https://vercel.com/button)](https://vercel.com/new/clone?repository-url=https://github.com/vercel/next.js/tree/canary/examples/inngest&project-name=inngest&repository-name=inngest)

To full deploy you'll need an [Inngest Cloud account](https://inngest.com) and the [Vercel Inngest integration](https://vercel.com/integrations/inngest) configured.

## How to use

Execute [`create-next-app`](https://github.com/vercel/next.js/tree/canary/packages/create-next-app) with [npm](https://docs.npmjs.com/cli/init), [Yarn](https://yarnpkg.com/lang/en/docs/cli/create/), [pnpm](https://pnpm.io), or [Bun](https://bun.sh/docs/cli/bunx) to bootstrap the example:

```bash
npx create-next-app --example inngest inngest-app
```

```bash
yarn create next-app --example inngest inngest-app
```

```bash
pnpm create next-app --example inngest inngest-app
```

```bash
bunx create-next-app --example inngest inngest-app
```

This is a [Next.js](https://nextjs.org/) project bootstrapped with [`create-next-app`](https://github.com/vercel/next.js/tree/canary/packages/create-next-app).

## Notes

First, run the development server:

```bash
npm run dev
# or
yarn dev
# or
pnpm dev
# or
bun dev
```

Open [http://localhost:3000](http://localhost:3000) with your browser to see the result.

The Inngest dev server will be running at [http://localhost:8288](http://localhost:8288). It can take a few seconds to start up.
4 changes: 4 additions & 0 deletions examples/inngest/next.config.js
Original file line number Diff line number Diff line change
@@ -0,0 +1,4 @@
/** @type {import('next').NextConfig} */
const nextConfig = {}

module.exports = nextConfig
24 changes: 24 additions & 0 deletions examples/inngest/package.json
Original file line number Diff line number Diff line change
@@ -0,0 +1,24 @@
{
"private": true,
"scripts": {
"dev": "concurrently \"npm:dev:*\"",
"dev:next": "next dev",
"dev:inngest": "npx inngest-cli@latest dev",
"build": "next build",
"start": "next start"
},
"dependencies": {
"inngest": "^2.7.1",
"next": "latest",
"react": "18.2.0",
"react-dom": "18.2.0"
},
"devDependencies": {
"@types/node": "20.7.0",
"@types/react": "18.2.23",
"@types/react-dom": "18.2.7",
"concurrently": "^8.2.1",
"encoding": "^0.1.13",
"typescript": "5.2.2"
}
}
5 changes: 5 additions & 0 deletions examples/inngest/src/app/api/inngest/route.ts
Original file line number Diff line number Diff line change
@@ -0,0 +1,5 @@
import { serve } from 'inngest/next'
import { inngest } from '../../../inngest/inngest.client'
import { helloWorld } from '@/inngest/functions/hello-world'

export const { GET, POST, PUT } = serve(inngest, [helloWorld])
18 changes: 18 additions & 0 deletions examples/inngest/src/app/layout.tsx
Original file line number Diff line number Diff line change
@@ -0,0 +1,18 @@
import type { Metadata } from 'next'

export const metadata: Metadata = {
title: 'Next.js Inngest Example',
description: 'Generated by create next app',
}

export default function RootLayout({
children,
}: {
children: React.ReactNode
}) {
return (
<html lang="en">
<body>{children}</body>
</html>
)
}
24 changes: 24 additions & 0 deletions examples/inngest/src/app/page.tsx
Original file line number Diff line number Diff line change
@@ -0,0 +1,24 @@
import { inngest } from '@/inngest/inngest.client'
import { redirect } from 'next/navigation'

export default function Home() {
async function triggerInngestEvent() {
'use server'
await inngest.send({
name: 'test/hello.world',
data: {
message: 'Hello from Next.js!',
},
})
redirect('http://localhost:8288/stream')
}
return (
<main>
<div>
<form action={triggerInngestEvent}>
<button type="submit">Trigger Your Inngest Function</button>
</form>
</div>
</main>
)
}
10 changes: 10 additions & 0 deletions examples/inngest/src/inngest/functions/hello-world.ts
Original file line number Diff line number Diff line change
@@ -0,0 +1,10 @@
import { inngest } from '../inngest.client'

export const helloWorld = inngest.createFunction(
{ id: 'hello-world', name: 'Hello World' },
{ event: 'test/hello.world' },
async ({ event, step }) => {
await step.sleep('1s')
return { event, body: event.data.message }
}
)
4 changes: 4 additions & 0 deletions examples/inngest/src/inngest/inngest.client.ts
Original file line number Diff line number Diff line change
@@ -0,0 +1,4 @@
import { Inngest } from 'inngest'

// Create a client to send and receive events
export const inngest = new Inngest({ name: 'Basic Inngest Application' })
27 changes: 27 additions & 0 deletions examples/inngest/tsconfig.json
Original file line number Diff line number Diff line change
@@ -0,0 +1,27 @@
{
"compilerOptions": {
"target": "es5",
"lib": ["dom", "dom.iterable", "esnext"],
"allowJs": true,
"skipLibCheck": true,
"strict": true,
"noEmit": true,
"esModuleInterop": true,
"module": "esnext",
"moduleResolution": "bundler",
"resolveJsonModule": true,
"isolatedModules": true,
"jsx": "preserve",
"incremental": true,
"plugins": [
{
"name": "next"
}
],
"paths": {
"@/*": ["./src/*"]
}
},
"include": ["next-env.d.ts", "**/*.ts", "**/*.tsx", ".next/types/**/*.ts"],
"exclude": ["node_modules"]
}