Inngest

In this guide, you'll learn how to connect a Vercel project to Inngest and set up Inngest in your Next.js application. If you don't already have a project to connect to, you can create one. Refer to "Automatic Installation" in the Next.js documentation for instructions.

Start by connecting to an existing Vercel project.

Run npm install inngest to install Inngest into your Next.js project.

In this step, you will write your first background 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!".

Creating an Inngest client

First, we will create our Inngest client, which enables us to define Inngest Functions and trigger them by sending events.

Let's create a new src/inngest/functions.ts file with its Inngest client:

1
import { Inngest } from "inngest";
2

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

Writing our first Inngest Function Let's now write our hello-world function that will wait for one minute before returning "Hello world!".

In src/inngest/functions.ts, let's add:

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

When an event gets trigger from your application or the Inngest Dashboard, Inngest send an HTTP request to your application to run the matching Inngest Function.

To enable that, you will create a Next.js API Route at /api/inngest in app/api/inngest/route.ts:

1
import { serve } from "inngest/next";
2
import { inngest, helloWorld } from "@inngest/functions";
3

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

Your Next.js application is now ready! Let's start the Next.js application and the Inngest Dev Server to trigger our first Inngest Function run.

Similarly to Next.js, Inngest provides a local DevServer, enabling you to benefit from all Inngest features locally, as well as a fully featured debug UI (think of Chrome DevTools for background jobs).

You can start the Inngest DevServer by running the following command in a new terminal, alongside your Next.js app:

1
npx inngest-cli@latest dev

Execute the following command to run your application locally and make your Inngest Functions available to the Inngest DevServer:

1
npm run dev

Navigate to http://127.0.0.1:8288/functions and click "Invoke" on the hello-world function.

You'll be redirected to the Runs view, where the progress of your hello-world Inngest Function run will be displayed live. By clicking on the hello-world run, you will see the progress of each step.

Deploying to Vercel

Once your project is ready, push your commit to deploy it to Vercel. The Inngest integration will automatically link your Vercel project by setting up the required environment variables.

If you are facing a syncing issue, consider disabling the Deployment Protection by following this guide.

Learn more about Inngest's concepts

• Inngest Events 101
• Implementing Multi-Step Functions
• Flow Control: Concurrency, Throttling, Debouncing and more