Inngest - 101

In the era of AI and bots, have you ever wondered how long-running tasks—like waiting for a response from an assistant—actually work behind the scenes? With a traditional HTTP request, this kind of interaction isn’t always feasible, since HTTP is typically short-lived and request–response based.

To support real-time, bi-directional communication, developers often rely on technologies like WebSockets.

This is where Inngest comes in.

1. What is Inngest?

Inngest replaces traditional message queues (like RabbitMQ or SQS) and state management systems. It allows you to write plain functions in TypeScript, Python, or Go that are durable—meaning they can run for minutes, hours, or months, survive server restarts, and automatically retry on failure.

Key Concepts

Events: Instead of calling a function directly, you "send" an event (like user.signup). Inngest then triggers any functions listening for that event.
Steps: Functions are broken into atomic "steps" (step.run, step.sleep). If a function fails at step 3, Inngest knows to only retry step 3 without re-running steps 1 and 2.
Durable Execution: Inngest handles the state and "waits" for you. For example, you can tell a function to step.sleep("wait-a-week", "7d"), and the function will pause and resume a week later.

2. Core Features

Zero Infrastructure: You don’t need to host a queue or a worker. Inngest calls your functions via a secure HTTPS webhook.
Flow Control: Built-in support for concurrency (limit how many jobs run at once), throttling (limit throughput to third-party APIs), and debouncing.
Observability: A built-in dashboard shows every event, every function run, and precisely where a workflow failed or is currently paused.
Local Development: The Inngest Dev Server gives you a local UI to trigger events and visualize your functions as you write them.

You can read more about Inngest and it’s features from this document

https://www.inngest.com/

Now we will see how we can integrate inngest in Next.js application

3.Next.js Quick Start

Before we start ensure you have created a Next.js application using the below command

npx create-next-app@latest --ts --eslint --tailwind --src-dir --app --import-alias='@/*' inngest-guide

once done run the application using the command npm run dev

Now we will install the inngest. With the Next.js app now running open a new tab in your terminal. In your project directory's root, run the following command to install Inngest SDK:

npm install inngest

Now we will run the inngest server which is a fast, in-memory version of Inngest where we can quickly send and view events and function runs

npx --ignore-scripts=false inngest-cli@latest dev

In your browser open http://localhost:8288 to see the development UI where later you will test the functions you write:

Create an Inngest Client

Inngest invokes your functions securely via an API endpoint at /api/inngest. To enable that, you will create an Inngest client in your Next.js project, which you will use to send events and create functions.

Make a new directory next to your app directory (for example, src/inngest) where you'll define your Inngest functions and the client.

In the /src/inngest directory create an Inngest client:

import { Inngest } from "inngest";

// Create a client to send and receive events
export const inngest = new Inngest({ id: "my-app" });

Next, we will set up a route handler for the /api/inngest route. To do so, create a file inside your app directory (for example, at src/app/api/inngest/route.ts) with the following code:

import { serve } from "inngest/next";
import { inngest } from "../../../inngest/client";

// Create an API that serves zero functions
export const { GET, POST, PUT } = serve({
  client: inngest,
  functions: [
    /* your functions will be passed here later! */
  ],
});

Create your first Inngest Function

In this step, we will write our first reliable serverless function. This function will be triggered whenever a specific event occurs (in our case, it will be test/hello.world). Then, it will sleep for a second and return a "Hello, World!".

Inside your src/inngest directory create a new file called functions.ts where you will define Inngest functions. Add the following code:

import { inngest } from "./client";

export const helloWorld = inngest.createFunction(
  { id: "hello-world" },
  { event: "test/hello.world" },
  async ({ event, step }) => {
    await step.sleep("wait-a-moment", "1s");
    return { message: `Hello ${event.data.email}!` };
  },
);

Now we will add the function to serve()

Next, import your Inngest function in the routes handler (src/app/api/inngest/route.ts) and add it to the serve handler so Inngest can invoke it via HTTP:

import { serve } from "inngest/next";
import { inngest } from "../../../inngest/client";
import { helloWorld } from "../../../inngest/functions";

export const { GET, POST, PUT } = serve({
  client: inngest,
  functions: [
    helloWorld, // <-- This is where you'll always add all your functions
  ],
});

Trigger your function from the Inngest Dev Server UI

Inngest is powered by events.You will trigger your function in two ways: first, by invoking it directly from the Inngest Dev Server UI, and then by sending events from code.

With your Next.js app and Inngest Dev Server running, open the Inngest Dev Server UI and select the "Functions" tab http://localhost:8288/functions. You should see your function. (Note: if you don't see any function, select the "Apps" tab to troubleshoot)

To trigger your function, use the "Invoke" button for the associated function:

In the pop up editor, add your event payload data like the example below. This can be any JSON and you can use this data within your function's handler. Next, press the "Invoke Function" button:

{
  "data": {
    "email": "test@example.com"
  }
}

The payload is sent to Inngest (which is running locally) which automatically executes your function in the background! You can see the new function run logged in the "Runs" tab:

When you click on the run, you will see more information about the event, such as which function was triggered, its payload, output, and timeline:

Triggering from code

To trigger Inngest functions to run in the background, you will need to send events from your application to Inngest. Once the event is received, it will automatically invoke all functions that are configured to be triggered by it.

To send an event from your code, you can use the Inngest client's send() method.

import { NextResponse } from "next/server";
import { inngest } from "../../../inngest/client"; // Import our client

// Opt out of caching; every request should send a new event
export const dynamic = "force-dynamic";

// Create a simple async Next.js API route handler
export async function GET() {
  // Send your event payload to Inngest
  await inngest.send({
    name: "test/hello.world",
    data: {
      email: "testUser@example.com",
    },
  });

  return NextResponse.json({ message: "Event sent!" });
}

Every time this API route is requested, an event is sent to Inngest. To test it, open http://localhost:3000/api/hello (change your port if your Next.js app is running elsewhere). You should see the following output: {"message":"Event sent!"}

If you go back to the Inngest Dev Server, you will see a new run is triggered by this event: