Next.js + Inngest Realtime Example

This is Next.js project showcases how to use @inngest/realtime to display live updates of documents (texts, PDFs, images) analysis.

Features

• Live data streaming from Inngest to your frontend
• React hooks for real-time data updates
• Typescript integration with channel and topic typing
• Example pattern for real-time event handling

Getting Started

Environment variables

Copy the .env.example as .env.local and fill in a valid OPENAI_API_KEY:

cp .env.example .env.local

Clone the Repository

git clone https://github.com/inngest/inngest-js.git
cd inngest-js/examples/realtime/next-realtime-hooks

Install Dependencies

pnpm install

Setup your local SQLite database

pnpm run db:generate
pnpm run db:migrate
pnpm run db:seed # optional

You’re app is ready to start!

Start the Development Server

npm run dev
# or
yarn dev
# or
pnpm dev

In a separate terminal, start the Inngest Dev Server:

npx inngest-cli@latest dev

Open localhost:3000 and click on the “Start” button to see the incoming realtime message appear.

DrizzleKit as your local database editor

At anytime, open the Drizzle Studio to inspect your local SQLite database records by running:

npx drizzle-kit studio

Project Structure

• /app - Next.js app router pages and components
• /app/api/inngest - Inngest API route handler
• /app/inngest - Inngest function definitions
• /components - React components including realtime examples

Learn More

• Inngest Documentation - Learn about Inngest features and API
• Inngest Realtime Documentation - Learn about the realtime features
• Next.js Documentation - Learn about Next.js features and API

Document-Processing