Add Next.js to supported Workers frameworks

src/content/docs/workers/frameworks/framework-guides/nextjs.mdx

@@ -0,0 +1,114 @@
+---
+pcx_content_type: how-to
+title: Next.js
+head: []
+description: Create an Next.js application and deploy it to Cloudflare Workers with Workers Assets.
+---
+
+import {
+	Badge,
+	Description,
+	InlineBadge,
+	Render,
+	PackageManagers,
+} from "~/components";
+
+#### New apps
+
+To create a new Next.js app, pre-configured to run on Cloudflare using [`@opennextjs/cloudflare`](https://opennext.js.org/cloudflare), run:
+
+```
+npm create cloudflare@latest --no-auto-update --experimental --framework next
+```
+
+#### Existing Next.js apps
+
+##### 1. Install @opennextjs/cloudflare
+
+First, install [@opennextjs/cloudflare](https://www.npmjs.com/package/@opennextjs/cloudflare):
+
+```sh
+npm install --save-dev @opennextjs/cloudflare
+```
+
+##### 2. Add a `wrangler.toml` file
+
+Then, add a [`wrangler.toml`](/workers/wrangler/configuration/) file to the root directory of your Next.js app:
+
+```toml
+main = ".worker-next/index.mjs"
+name = "my-app"
+compatibility_date = "2024-09-23"
+compatibility_flags = ["nodejs_compat"]
+experimental_assets = { directory = ".worker-next/assets", binding = "ASSETS" }
+```
+
+<Callout>
+As shown above, you must enable the [`nodejs_compat` compatibility flag](/workers/runtime-apis/nodejs/) *and* set your [compatibility date](/workers/configuration/compatibility-dates/) to `2024-09-23` or later, in order for your Next.js app to work with @opennextjs/cloudflare.
+</Callout>
+
+`wrangler.toml` is where you configure your Worker and define what resources it can access via [bindings](/workers/runtime-apis/bindings/).
+
+##### 3. Update `package.json`
+
+Add the following to the scripts field of your `package.json` file:
+
+```json
+"build:worker": "cloudflare", TODO
+"dev:worker": "wrangler dev --port 8771",
+"preview:worker": "npm run build:worker && npm run dev:worker",
+"deploy:worker": "npm run build:worker && wrangler deploy"
+```
+
+- `npm run build:worker`: Runs the [@opennextjs/cloudflare](https://www.npmjs.com/package/@opennextjs/cloudflare) adapter. This first builds your app by running `next build` behind the scenes, and then transforms the build output to a format that you can run locally using [Wrangler](/workers/wrangler/), and deploy to Cloudflare.
+- `npm run dev:worker`: Takes the output generated by `build:worker` and runs it locally in [workerd](https://github.com/cloudflare/workerd), the open-source Workers Runtime, allowing you to run the app locally in the same environment that it will run in production. If you instead run `next dev`, your app will run in Node.js, which is a different JavaScript runtime from the Workers runtime, with differences in behavior and APIs.
+- `npm run preview:worker`: Runs `build:worker` and then `preview:worker`, allowing you to quickly preview your app running locally in the Workers runtime, via a single command.
+- `npm run deploy`: Builds your app, and then deploys it to Cloudflare
+
+### 4. Add caching with Workers KV
+
+`opennextjs/cloudflare` uses [Workers KV](/kv/) as the cache for your Next.js app. Workers KV is [fast](https://blog.cloudflare.com/faster-workers-kv) and uses Cloudflare's [Tiered Cache](/cache/how-to/tiered-cache/) to increase cache hit rates. When you write cached data to Workers KV, you write to storage that can be read by any Cloudflare location. This means your app can fetch data, cache it in KV, and then subsequent requests anywhere around the world can read from this cache.
+
+To enable caching, you must:
+
+##### Create a KV namespace
+
+```
+npx wrangler@latest kv namespace create NEXT_CACHE_WORKERS_KV
+```
+
+##### Add the KV namespace to your Worker
+
+```
+[[kv_namespaces]]
+binding = "NEXT_CACHE_WORKERS_KV"
+id = "<YOUR_NAMESPACE_ID>"
+```
+
+#### Set the name of the binding to `NEXT_CACHE_WORKERS_KV`
+
+As shown above, the name of the binding that you configure for the KV namespace must be set to `NEXT_CACHE_WORKERS_KV`.
+
+##### 5. Develop locally
+
+You can continue to run `next dev` when developing locally.
+
+In step 3, we also added the `npm run preview:worker`, which allows you to quickly preview your app running locally in the Workers runtime, rather than in Node.js. This allows you to test changes in the same runtime as your app will run in when deployed to Cloudflare.
+
+##### 6. Deploy to Cloudflare Workers
+
+Either deploy via the command line:
+
+```sh
+npm run deploy
+```
+
+Or [connect a GitHub or GitLab repository](/workers/ci-cd/), and Cloudflare will automatically build and deploy each pull request you merge to your production branch.
+
+---
+
+## Static assets
+
+You can serve static assets your Astro application by placing them in the `./public/` directory. This can be useful for resource files such as images, stylesheets, fonts, and manifests.
+
+<Render file="workers-assets-routing-summary" />