Next.js on Cloudflare: Voice AI Assistant

This is a Next.js pre-configured to run on Cloudflare using @opennextjs/cloudflare.

Try it out: Live Demo

Getting Started

Note that I use yarn in this README, but you can remove yarn.lock and use npm, pnpm, or bun if you like

Update worker-configuration.d.ts by running:

cd worker && yarn cf-typegen

Leave the Durable Object Worker running. It serves as a local WebSocket server:

yarn dev

Run Next.js development server from root directory (the Durable Object server must also be running):

First, copy .env.example to .env.local

cp .env.example .env.local

Then, run:

yarn dev

Open http://localhost:3000 with your browser to see the result.

You can start editing the page by modifying app/page.tsx. The page auto-updates as you edit the file.

Deploy on Cloudflare

Before deploying, log in with your Cloudflare account by running:

npx wrangler login

You will be directed to a web page asking you to log in to the Cloudflare dashboard. After you have logged in, you will be asked if Wrangler can make changes to your Cloudflare account. Scroll down and select Allow to continue.

Change into your Durable Object Worker directory:

cd worker

Deploy the Worker:

yarn deploy

Copy only the host from the generated Worker URL, excluding the protocol, and set NEXT_PUBLIC_WS_HOST in .env.local to this value (e.g., worker-unique-identifier.workers.dev).

Change into your root directory and deploy your Next.js app:

yarn deploy

Or connect a Github or Gitlab repository, and Cloudflare will automatically build and deploy each pull request you merge to your production branch.

Community

If you found this useful and would like to join my free AI builders community: Discord

References

• talk2ai - Cloudflare AI Voice Assistant
• Build Live Cursors with Next.js, RPC, and Durable Objects