examples: Add inngest next.js example (#56049)

Co-authored-by: Lee Robinson <[email protected]>
Co-authored-by: kodiakhq[bot] <49736102+kodiakhq[bot]@users.noreply.github.com>

docs/02-app/01-building-your-application/06-optimizing/10-third-party-libraries.mdx

@@ -240,7 +240,7 @@ docs](https://developers.google.com/maps/documentation/embed/embedding-map).
 | `allowfullscreen` | Optional | Property to allow certain map parts to go full screen.                                              |
 | `loading`         | Optional | Defaults to lazy. Consider changing if you know your embed will be above the fold.                  |
 | `q`               | Optional | Defines map marker location. _This may be required depending on the map mode_.                      |
-| `center`          | Optional | Defines the center of the map view.                                                                     |
+| `center`          | Optional | Defines the center of the map view.                                                                 |
 | `zoom`            | Optional | Sets initial zoom level of the map.                                                                 |
 | `maptype`         | Optional | Defines type of map tiles to load.                                                                  |
 | `language`        | Optional | Defines the language to use for UI elements and for the display of labels on map tiles.             |

examples/inngest/.env.development

@@ -0,0 +1,2 @@
+INNGEST_EVENT_KEY=your-event-key
+INNGEST_SIGNING_KEY=your-signing-key

examples/inngest/.gitignore

@@ -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

examples/inngest/README.md

@@ -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
+
+## 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.

examples/inngest/next.config.js

@@ -0,0 +1,4 @@
+/** @type {import('next').NextConfig} */
+const nextConfig = {}
+
+module.exports = nextConfig

examples/inngest/package.json

@@ -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": "^3.4.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"
+  }
+}

examples/inngest/src/app/api/inngest/route.ts

@@ -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])

examples/inngest/src/app/layout.tsx

@@ -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>
+  )
+}

examples/inngest/src/app/page.tsx

@@ -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>
+  )
+}

examples/inngest/src/inngest/functions/hello-world.ts

@@ -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('sleep for a second', '1s')
+    return { event, body: event.data.message }
+  }
+)

examples/inngest/src/inngest/inngest.client.ts

@@ -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' })

examples/inngest/tsconfig.json

@@ -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"]
+}