Introducing the Inngest TypeScript / JavaScript SDK
Join our Discord
Sign up for free

Next.js

Inngest works with NextJS out of the box, and allows you to write background jobs, scheduled functions, and event driven systems using Next's API routes.

Follow along to learn how to:

  1. Integrate your event types within functions
  2. Write functions in NextJS
  3. Serve your functions with a new API route
  4. Register your functions with Inngest after deploying to your hosting service.

Integrating event types into your project

Inngest fully types every event you send, ensuring that your functions and data are always valid. To generate your type library, run:

npx inngest-cli types ts

This will prompt you to log in to your Inngest account, then generate types for every event in your account (plus public events) inside the __generated__ folder.

Writing functions in NextJS

Firstly, create a new directory within the root of your NextJS app called inngest. This will contain all of your functions:

bash
mkdir ./inngest

Within this directory you can write your Inngest functions, eg ./inngest/new_pr.ts:

./inngest/new_pr.ts
typescript
import { createFunction } from "inngest";
// Import the type for the event you want to listen to. This fully types
// the arguments to your function. The types are generated by running
// `npx inngest-cli types ts`.
import { GithubPullRequest } from '../__generated__/inngest';
 
export const newPR = createFunction<GithubPullRequest>("New PR", "github/pull_request", ({ event }) => {
// This function is triggered when the `github/pull_request` event is received via
// a GH webhook.
if (event.data.action === 'opened') {
// New PR opened.
}
});

Serving functions in NextJS

Create a new ./pages/api/inngest.ts file to serve the Inngest function API. Import serve from the inngest/next package to create your endpoint, with all of the functions you'd like to enable:

./pages/api/inngest.ts
typescript
import { serve } from "inngest/next";
import { newPR } from "../../inngest/new_pr";
 
// You must export the serve handler, which hosts all of the provided functions
// under one API endpoint.
export default serve("My app/service name", process.env.INNGEST_SIGNING_KEY, [newPR]);

This hosts an API endpoint at ${your-url}/api/inngest, which we'll use to call your functions.

serve syntax

serve(appName, signingKey, [functions]);

serve arguments

  • appName: The name of your app or microservice, used to group all functions together
  • signingKey: The signing key for your workspace, available in your account
  • [functions]: An array of all functions to enable

Registering your functions with Inngest

By default, Inngest doesn't know which functions you're serving or the URL of your app. Once you deploy your site to production, you'll need to reigster your functions with Inngest.

Depending on the platform you deploy to this may be handled automatically, or you may need to register your functions manually. Read the deploy docs for more information.

Registering via the UI

You can add your endpoint’s URL to Inngest via the dashboard:

Registering via the API

You can register your function’s endpoints with a single PUT call to your function endpoint:

bash
curl -X PUT https://www.example.com/api/inngest

Remember to swap www.example.com with your own domain name.

You can read more about registering functions here.