Skip to content
Merged
Show file tree
Hide file tree
Changes from 1 commit
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
17 changes: 11 additions & 6 deletions README.md
Original file line number Diff line number Diff line change
@@ -1,18 +1,23 @@
# [POC] Build Next.js app for cf workers
# Deploy Next.js apps to Cloudflare!

This monorepo includes a package for adapting a Next.js application built via `next build` (in standalone mode) to run in the Cloudflare workerd runtime.
OpenNext for Cloudflare is Cloudflare specific adapter that enables deployment of Next.js applications to Cloudflare.

> [!NOTE]
> The code here is built based on the amazing work done by @mhart in <https://github.com/mhart/nextjs-commerce>
This monorepo includes a package for adapting a Next.js application built via `next build` (in standalone mode) to run in the Cloudflare workerd runtime using the [Workers Node.js compatibility layer](https://developers.cloudflare.com/workers/runtime-apis/nodejs/).

## The repository
## Get started

Follow instructions at [`@opennextjs/cloudflare`](https://www.npmjs.com/package/@opennextjs/cloudflare).

## Contributing

### The repository

The repository contains two directories:

- `packages` containing a cloudflare package that can be used to build Cloudflare workers compatible output from Next.js applications
- `examples` containing Next.js applications that use the above mentioned cloudflare.

## How to try out/develop in the repository
### How to try out/develop in the repository

Install the dependencies:

Expand Down
52 changes: 39 additions & 13 deletions packages/cloudflare/README.md
Original file line number Diff line number Diff line change
@@ -1,39 +1,65 @@
# Next.js builder for Cloudflare
# OpenNext for Cloudflare

How to update a Next.js application to run on Cloudflare.
Deploy Next.js apps to Cloudflare!

## Configure your app
OpenNext for Cloudflare is Cloudflare specific adapter that enables deployment of Next.js applications to Cloudflare.

- add the following `devDependencies` to the `package.json`:
## Getting started

```bash
pnpm add -D wrangler@latest @opennextjs/cloudflare
```
You can use [`create-next-app`](https://nextjs.org/docs/pages/api-reference/cli/create-next-app) to start a new application or take an existing Next.js application and deploy it to Cloudflare using the following few steps:

## Serve your app
## Configure your app

- build the app and adapt it for Cloudflare
- add the following `devDependencies` to the `package.json`:

```bash
pnpx cloudflare
pnpm add -D wrangler@latest @opennextjs/cloudflare
```

- add a `wrangler.toml` at the root of your project

```toml
#:schema node_modules/wrangler/config-schema.json
name = "<app-name>"
name = "<your-app-name>"
main = ".worker-next/index.mjs"

compatibility_date = "2024-08-29"
compatibility_flags = ["nodejs_compat_v2"]
compatibility_date = "2024-09-23"
compatibility_flags = ["nodejs_compat"]

# Use the new Workers + Assets to host the static frontend files
experimental_assets = { directory = ".worker-next/assets", binding = "ASSETS" }
```

## Local development

- you can use the regular `next` CLI to start the Next.js dev server:


## Local preview

Run the following commands to preview the production build of your application locally:

- build the app and adapt it for Cloudflare

```bash
pnpx cloudflare
```
- Preview the app in Wrangler

```bash
pnpm wrangler dev
```

## Deploy your app

Deploy your application to production with the following:

- build the app and adapt it for Cloudflare

```bash
pnpx cloudflare
```

```bash
pnpm wrangler deploy
```
Loading