This is a Next.js boilerplate app with OpenNext.js. Ready to be deployed to Cloudflare Workers. Below are the instructions to get it up and running. Also a little hack how to get Next.js server actions working with Cloudflare bindings in development mode.
1. Clone/fork the repository.
2. Read the documentation provided at Cloudflare Docs > Workers > Frameworks > Next.js and Open NEXT > Get Started.
3. Then read and edit wrangler.toml
and package.json
files. You may want to change at least the app/worker name, which currently is joker-ai
.
Pay attention to scripts section in package.json
.
4. Install wrangler and create KV namespaces for the project. Update wrangler.toml
with the namespace IDs from the output of wrangler kv:namespace create ..
. Also, you may create these namespaces from the Cloudflare's dashboard too and use their IDs in wrangler.toml
.
pnpm i -g wrangler@latest
wrangler kv:namespace create NEXT_CACHE_WORKERS_KV_PREVIEW
wrangler kv:namespace create NEXT_CACHE_WORKERS_KV_PREVIEW --preview
Install the dependencies and publish/deploy your worker. Wrangler will do all the work for you, later you can review them from the Cloudflare's dashboard.
pnpm i
pnpm deploy:worker
Wrangler will ask you for authentication, then it will publish your worker to Cloudflare. You can authenticate via the browser or generate an API token and export it in your env, like export CLOUDFLARE_API_TOKEN=05lc8a...
.
5. Create GitHub/GitLab repository if not present and publish your (cloned) source code there.
6. Open Cloudflare's dashboard find your worker and connect it to the GitHub/GitLab repository. Thus your worker will be built and deployed on push, depending on your settings.
To run your worker locally you can use pnpm dev
or pnpm preview:worker
.
I found, in order to get Next.js 'server actions' working with the AI binding, when I'm using pnpm dev
or pnpm preview:worker
, I was need to setup Cloudflare tunnel which points to my dev pc (ip:3000 - see the dev:worker
script). Then setup the FQDN of the tunnel in the wrangler.toml
file within the [dev] section.
It's interesting and maybe side effect, but when you use a Cloudflare tunnel for local development, you can use pnpm dev
and it have no problems to access the bindings.
You may need to run pnpm preview:worker
frs in order to get the bindings working, and then you can run pnpm dev
for local development..