Skip to content

Commit

Permalink
realign the recommended development workflow with what we have in the…
Browse files Browse the repository at this point in the history
… cloudflare docs (#798)
  • Loading branch information
dario-piotrowicz authored Jun 25, 2024
1 parent 7a6f16c commit 66fab71
Showing 1 changed file with 16 additions and 9 deletions.
25 changes: 16 additions & 9 deletions packages/next-on-pages/README.md
Original file line number Diff line number Diff line change
Expand Up @@ -65,29 +65,36 @@ Next, in the [Cloudflare Dashboard](https://dash.cloudflare.com/?to=/:account/pa
> **Note**:
> When deploying via the Git integration, for better compatibility with tools such as `yarn` and `pnpm` we recommend using the Build system version 2 (that is the default so no action is required).
## Local development
## Recommended development workflow

### Standard Next.js development
When developing a `next-on-pages` application, this is the development workflow that Cloudflare recommends:

You can develop your application locally by simply using the [standard Next.js development server](https://nextjs.org/docs/app/api-reference/next-cli#development) you'd normally use.
### Develop using the standard Next.js dev server

> **Warning**: Please note however that the standard Next.js dev server does not work with a Cloudflare Pages compatible application/output, so it does not provide any reassurance that your application once built with `@cloudflare/next-on-pages` will actually correctly run, in order to make sure it does the only option (besides simply deploying it and hoping for the best) is to locally preview the application as described below.
The [standard development server provided by Next.js](https://nextjs.org/docs/getting-started/installation#run-the-development-server) is the best available option for a fast and polished development experience. The `next-dev` submodule makes it possible to use Next.js' standard development server while still having access to your Cloudflare bindings.

### Local preview
### Build and preview your application locally

To preview locally your Cloudflare Pages application, simply run:
To ensure that your application is being built in a manner that is fully compatible with Cloudflare Pages, before deploying it, or whenever you are comfortable checking the correctness of the application during your development process, you will want to build and preview it locally using Cloudflare's `workerd` JavaScript runtime.

Do this by running:

```sh
npx @cloudflare/next-on-pages
```

This command will build your Next.js application and produce a `.vercel/output/static` directory which you can then supply to Wrangler:
And preview your project by running:

```sh
npx wrangler pages dev .vercel/output/static --compatibility-flag=nodejs_compat
npx wrangler pages dev .vercel/output/static
```

Running `npx @cloudflare/next-on-pages --help` will display a useful help message which will detail the various additional options the CLI offers.
> [!NOTE]
> The [`wrangler pages dev`](/workers/wrangler/commands/#dev-1) command needs to run the application using the [`nodejs_compat`](/workers/configuration/compatibility-dates/#nodejs-compatibility-flag) compatibility flag. The `nodejs_compat` flag can be specified in either your project's `wrangler.toml` file or provided to the command as an inline argument: `--compatibility-flag=nodejs_compat`.
### Deploy your application and iterate

After you have previewed your application locally, you can deploy it to Cloudflare Pages (both via [Direct Uploads](/pages/get-started/direct-upload/) or [Git integration](/pages/configuration/git-integration/)) and iterate over the process to make new changes.

## Cloudflare Platform Integration

Expand Down

0 comments on commit 66fab71

Please sign in to comment.